从 ID HTML 获取值并保存在数组中

Question

我正在做一个视图，一旦我点击我就会显示

For 循环

我有一个捕获二维码并将其显示在屏幕上的视图，我接下来要做的是通过使用 for 循环迭代元素来获取这些值并将其保存在数组中，在这种情况下我的 ID 是 id="scanned-result"，我想迭代每个包含值并保存到数组。

我正在这样做，但由于某种原因它没有正确执行操作。我想知道我应该纠正什么？

      function SubmitCodes() {
             var QRCodeval= document.querySelectorAll('scanned-result');
             var arr = [];
             for (var i in QRCodeval) {
                 alert(QRCodeval[i]);
                 arr.push( QRCodeval[i]);
             }
             alert(arr.val);
         }

查看

    <div class="container">
        <div class="row">
            <div class="col-md-12" style="text-align: center;margin-bottom: 20px;">
                <div id="reader" style="display: inline-block;"></div>
                <div class="empty"></div>
    
                <div id="scanned-result">
                   <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div>
                   <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div></div>
            </div>
    
        </div>
    </div>

Answer 1

由于您的页面上没有 <scanned-result></scanned-result> 元素，正如 charlietfl 指出的那样，您不会得到任何结果。

由于您的 HTML 标记如下：

<div id="scanned-result">
    <!-- … -->
</div>

您正在查找 ID。

并且 CSS 选择器中的有效 ID 查询是 #，因此您应该这样查询：

var QRCodeval = document.querySelectorAll('#scanned-result')

Answer 2

我已经更改迭代以使用 ID scanned-result 内的行填充数组。这会有帮助吗？

function SubmitCodes() {
        var QRCodeval = document.getElementById('scanned-result').children;
        var arr = [];

        for (var i = 0; i < QRCodeval.length; i++) {
            arr.push(QRCodeval[i].innerText)
        }

        console.log(arr)
    }

<div class="container">
    <div class="row">
        <div class="col-md-12" style="text-align: center;margin-bottom: 20px;">
            <div id="reader" style="display: inline-block;"></div>
            <div class="empty"></div>

            <div id="scanned-result">
                <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div>
                <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div>
            </div>
        </div>

    </div>
</div>

Answer 3

您的代码存在几个问题。要使用 querySelector 按 ID select 元素，您需要使用 # select 或者，对于 select 内部的 div，您可以使用 element > element select或.

var QRCodeval = document.querySelectorAll("#scanned-result>div");

querySelectorAll returns 一个节点列表。所以你需要遍历它来获取单个元素的值。但是你 should not 使用 for..in。您可以改用 forEach。

function submitCodes() {
  var QRCodeval = document.querySelectorAll("#scanned-result>div");
  var arr = [];
  QRCodeval.forEach((el) => arr.push(el.innerHTML));
  console.log(arr)
}

submitCodes();

<div class="container">
  <div class="row">
    <div class="col-md-12" style="text-align: center;margin-bottom: 20px;">
      <div id="reader" style="display: inline-block;"></div>
      <div class="empty"></div>

      <div id="scanned-result">
        <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div>
        <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div>
      </div>
    </div>

  </div>
</div>

要获取元素内的文本，您可以使用 innerHTML。

从 ID HTML 获取值并保存在数组中

Get values from ID HTML and save in array

javascript

html

asp.net-mvc