如何从使用createElement()创建的HTML输入(文本)中获取用户数据

Question

我的问题

我想了解如何访问input1和input2中的值，将它们存储在一个变量中，这样我以后就可以将它们与计算这两个值并将其显示在结果div中的函数一起使用。

const input1 = document.createElement("input");
document.body.appendChild(input1);
const input2 = document.createElement("input");
document.body.appendChild(input2);
const result = document.createElement("div");
document.body.appendChild(result);

Answer 1

一个想法可以是在创建的输入上使用EventListener来操作数据

const input1 = document.createElement("INPUT");
document.body.appendChild(input1);
input1.addEventListener('change', function (e) {
var target = e.target || e.srcElement;
console.log(target.value);
});

您还可以向创建的元素添加一个选择器(id或类(，并通过这个选择器恢复它

const input1 = document.createElement("INPUT");
document.body.appendChild(input1);
input1.id = 'test';
function showData() {
var input = document.getElementById('test');
console.log(input.value);
}

<button onclick="showData()">show data</button>

你的样品看起来像

const input1 = document.createElement("INPUT");
input1.id = 'input1';
document.body.appendChild(input1);
const input2 = document.createElement("INPUT");
input2.id = 'input2';
document.body.appendChild(input2);
const result = document.createElement("DIV");
result.id = 'result';
document.body.appendChild(result);

function showResult() {
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var result = document.getElementById('result');
if (input1 && input2 && result) {
result.innerText = input1.value * input2.value;
}
}

<button onclick="showResult()">show result</button>

如果必须动态创建div和showresult，还可以创建按钮并操作onclick事件

var numberOfRow = 0;
function copyResultInNextInput(nextNumber, result) {
var next = document.getElementById('input1_' + (nextNumber));
if (next) {
next.value = result.innerText;
}
}
function createNewRow(haveSeveralButtons) {
numberOfRow++;
const nextNumber = numberOfRow + 1;
const input1 = document.createElement("INPUT");
input1.id = 'input1_' + numberOfRow;
document.body.appendChild(input1);
const input2 = document.createElement("INPUT");
input2.id = 'input2_' + numberOfRow;
document.body.appendChild(input2);
const result = document.createElement("DIV");
result.id = 'result_' + numberOfRow;
document.body.appendChild(result);
const button = document.createElement("BUTTON");
button.innerText = 'show result';
button.addEventListener('click', function() {
result.innerText = input1.value * input2.value;
if (!haveSeveralButtons) {
copyResultInNextInput(nextNumber, result);
}
});
document.body.appendChild(button);
if (haveSeveralButtons) {
const button2 = document.createElement("BUTTON");
button2.innerText = 'copy result in next input1';
button2.addEventListener('click', function() {
copyResultInNextInput(nextNumber, result);
});
document.body.appendChild(button2);
}
const hr = document.createElement("HR");
document.body.appendChild(hr);
}

<button onclick="createNewRow(false)">create New Row with one button</button>
<button onclick="createNewRow(true)">create New Row with two buttons</button>
<hr/>

Answer 2

好的，所以Id有效，但它只适用于那一行。我需要在创建的每一行上独立地重复这个过程(等式(。