将 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  onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>

<script>

function barcode() {

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

    //setupLiveReader(resultElement)

    document.getElementById("codeInput").value = resultElement;

}  

</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  onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>

<script>

   function barcode() {

       const resultElement = document.getElementById("code-input");

       setupLiveReader(resultElement);

   }  

</script>

Answer 3

function getValue() {

    var resultInputValue = document.getElementById("inputValue").value;

    document.getElementById("valueShow").innerHTML = resultInputValue;

}  

<p id="valueShow">input value is appear here</p>

<input type="text" id="inputValue">

<button  onclick="getValue()" type="submit">Get Value</button>