将 getElementById 值传递给文本框值时出现问题

Question

我可以在 p 元素上看到扫描值（id =“code”）。如何用这个值填充文本框？

实际上，当我按下“扫描条形码”按钮时，相机打开并扫描 EAN13 条形码，并且该值显示在 P 元素中（590123...是条形码）。可以在下面看到。但我想在文本框中看到这个值。

function barcode() {

  var resultElement = document.getElementById("code");

 // setupLiveReader(resultElement)

}

<p id="code">code is appearing here</p>

<input class="form-control" type="text" id="code">

<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>

Answer 1

不能有两个具有相同 id 的元素。要获取标签的内容，p只需调用innerHTML它即可。之后使用新的 id 设置输入的值。<p id="code">code is appear here</p><input class="form-control" type="text" id="codeInput"><button&nbsp; onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button><script>function barcode() {&nbsp; &nbsp; var resultElement = document.getElementById("code").innerHTML;&nbsp; &nbsp; //setupLiveReader(resultElement)&nbsp; &nbsp; document.getElementById("codeInput").value = resultElement;}&nbsp;&nbsp;</script>

Answer 2

更改 ，id以便只有一个id="code"，然后更新脚本，以便 resultElement 具有 的 id<input...<p id="code">code is appear here</p><input class="form-control" type="text" id="code-input"><button&nbsp; onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button><script>&nbsp; &nbsp;function barcode() {&nbsp; &nbsp; &nbsp; &nbsp;const resultElement = document.getElementById("code-input");&nbsp; &nbsp; &nbsp; &nbsp;setupLiveReader(resultElement);&nbsp; &nbsp;}&nbsp;&nbsp;</script>

Answer 3

function getValue() {&nbsp; &nbsp; var resultInputValue = document.getElementById("inputValue").value;&nbsp; &nbsp; document.getElementById("valueShow").innerHTML = resultInputValue;}&nbsp;&nbsp;<p id="valueShow">input value is appear here</p><input type="text" id="inputValue"><button&nbsp; onclick="getValue()" type="submit">Get Value</button>