如何在javascript中动态创建的div中传递元素作为参数

Question

这是我的代码

const div = document.createElement('div');

div.className = 'row';
div.innerHTML = `
<span> ${alarmName} </span>
<br>
<label for = "name" > Time = </label>
<input type="text" name="name" id = "alarmTime" value="${alarmTime}" disabled />
<button class="buttonClass" onclick="removeRowThis(this,document.getElementById('alarmTime'){.value)"> delete </button>
`;

那么我有一个removeRowThis函数。

function removeRowThis(input : any, value: String) {
(<HTMLInputElement>document.getElementById('alarm2')).removeChild(input.parentNode);
alert(value);
}

removeRow中的alert(value(这个函数总是给我第一个值。如何克服这一点？

Answer 1

创建按钮时最好完全避免内联处理程序并附加一个事件侦听器：

const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
<span> ${alarmName} </span>
<br>
<label for = "name" > Time = </label>
<input type="text" name="name" value="${alarmTime}" disabled />
<button class="buttonClass"> delete </button>
`;
div.querySelector('.buttonClass').onclick = () => {
alert(div.querySelector('input').value); // please use something other than alert
div.remove();
};