javascript - 如何根据输出值添加同一图像的 'x' 编号？

Question

我对编码非常陌生，想知道如何根据输入和输出值多次插入相同的图像。我当前的基本添加代码是:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="1"> +
  <input type="number" id="b" value="0"> =
  <output name="x" for="a b"></output>
</form>

现在，我希望能够添加与我获得的输出值相对应的图像数量。我怎样才能做到这一点？再次，如果答案是显而易见的，我很抱歉。我对此很陌生。

Answer 1

为了更好的实践，最好用 function 分隔 HTML 和 Javascript。 .

您需要在函数中执行以下步骤。

1. 获取变量的输入值。
2. 添加它们并使用 document.getElementById().value 显示
3. 使用循环添加图像(c 次)

这是工作代码

var update = () => {
  let a = parseInt(document.getElementById('a').value);
  let b = parseInt(document.getElementById('b').value);
  let c = isNaN(a + b) ? 0 : (a + b);
  document.getElementById('x').value = c;

  document.getElementById('images').innerHTML = '';
  for (let i = 0; i < c; i++) {
    document.getElementById('images').innerHTML += '<img src="http://via.placeholder.com/200x150">';
  }
}

<form oninput="update();">
  <input type="number" id="a" value="1"> +
  <input type="number" id="b" value="0"> =
  <output id="x" for="a b"></output>
</form>

<div id='images'></div>

将 http://via.placeholder.com/200x150 替换为您的图像路径。

希望有帮助。