Onclick во внутреннем HTML

Я хотел бы добавить кнопку в innerHTML, при нажатии на которую она запускает функцию.

var test = document.getElementById('test');
test.innerHTML += "<button onclick = "
myFunction()
">Click me</button> ";


function myFunction() {
  alert("hello");
}

<div id = "test"> </div>

Я хотел бы понять, почему этот код не работает таким образом

javascript

11.06.2019 15:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

958

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны использовать одиночные/двойные кавычки или избегать их.

test.innerHTML += "<button onclick='myFunction()'>Click me</button> ";

ИЛИ

test.innerHTML += "<button onclick=\"myFunction()\">Click me</button> ";

11.06.2019 15:28

Я вижу здесь несколько решений:

1. Вы используете одинарные кавычки внутри двойных или наоборот

2. Вы избегаете одинарных/двойных кавычек внутри строки при использовании только одинарных или двойных кавычек

3. использовать добавление jquery

ПРИМЕЧАНИЕ. После добавления JQuery вы можете просто вставить другой элемент HTML, поэтому не беспокойтесь о неправильных кавычках/экранированных символах и т. д.

var test = document.getElementById('test');
test.innerHTML += "<button onclick='myFunction()'>Click me</button>";


var test2 = document.getElementById('test2');
test2.innerHTML += "<button onclick=\"myFunction()\">Click me</button>";

$("#test3").append("<button onclick='myFunction()'>Click me</button>");


$("#test4").append($("#btn"));


function myFunction() {
  alert("hello");
}

#test4 #btn {
 display: block;
}

#btn{
display: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1:
<div id = "test"></div>
2:
<div id = "test2"></div>
3:
<div id = "test3"></div>
4:
<div id = "test4"></div>


<button id = "btn" onclick='myFunction()'>Click me</button>

11.06.2019 15:40

Другие вопросы по теме

Вставить переменную в импортированную строку

Разобрать текстовое содержимое в определенный формат json

Как сделать форматирование данных с помощью lodash

Попытка вернуть URL-адрес из файла JSON

React Hooks useEffect, добавление зависимостей запускает бесконечный цикл

В чем разница между element.style="height: 90px;" и element.style.height="90px";?

Проблема с созданием веб-карты для онлайн-игры

Почему этот расчет возвращает -Infinity?

Почему я не могу определить вне функции, за которой следует =?

Создание нового холста VS clearRect

Onclick во внутреннем HTML

Ответы 2

Другие вопросы по теме

Похожие вопросы