innerHTML передаёт переменные как параметры в событии onClick

Question

Мне нужно передать переменную в качестве параметра в событии onclick, используя innerHTML. Вот мой код

var seriesdel = document.getElementById('series_name').value; 
document.getElementById('all_series').innerHTML +="<p>"+document.getElementById('series_name').value+" <button class='button' id='delete' onclick='deleteseries("+seriesdel+");' value='Delete'>Delete</button></p>"; 

Как вы видите, я стараюсь передать переменную «seriesdel» в функции «deleteseries», но я просто не могу сделать это работает.

Спасибо за помощь.

Answer 1

Поскольку вы пытаетесь передать объект строки, вам нужно, чтобы избежать вашей строки в вызове функции OnClick: onclick='deleteseries(\""+seriesdel+"\");'

Answer 2

Значения контроля формы - это строки.

Если вы хотите вставить строковое значение в JavaScript, вы должны окружить его кавычками.

Вы пропустили кавычки, поэтому все, что набрано на вход, будет (если оно не является числом) рассматриваться как имя переменной или синтаксическая ошибка.

Добавить кавычки.

---

Пытаясь справиться с JavaScript, встроенный в HTML, встроенный в JavaScript (который, вероятно, внедренного в HTML) даст вам головную боль. Вместо этого используйте DOM. Это многословность, но намного яснее.

var seriesdel = document.getElementById('series_name').value; 
var paragraph = document.createElement('p'); 
paragraph.appendChild(document.createTextNode(seriesdel)); 
var button = document.createElement("button"); 
button.classList.add("button"); 
button.setAttribute("id", "delete"); 
button.value = "Delete"; 
button.appendChild(document.createTextNode("Delete")); 
button.addEventListener("click", deleteHandler); 
paragraph.appendChild(button); 
document.getElementById('all_series').appendChild(paragraph); 

function deleteHandler(event) { 
    deleteseries(seriesdel); 
}