Get values from ID HTML and save in array-CodePudding

I'm doing a view where once I click I'm displaying

For Loop

I am having a view that captures a QR code and displays it on the screen, what I want to do next is take these values by iterating the elements with a for loop and save it in an array, in this case my ID is id="scanned-result" and I want to iterate each containing values and saving to an array.

I am doing this but for some reason it is not performing the operation correctly. I would like to know what I should correct?

      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);
         }

VIEW

    <div >
        <div >
            <div  style="text-align: center;margin-bottom: 20px;">
                <div id="reader" style="display: inline-block;"></div>
                <div ></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>

CodePudding user response：

There are several issues with your code. To select element by ID using querySelector you need to use # selector, also to select the divs inside you can use element > element selector.

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

querySelectorAll returns a nodeList. So you need to iterate through it to get value of individual elements. But you should not use for..in. You can use forEach instead.

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

submitCodes();

<div >
  <div >
    <div  style="text-align: center;margin-bottom: 20px;">
      <div id="reader" style="display: inline-block;"></div>
      <div ></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>

To get the text inside of the elements you can use innerHTML.

CodePudding user response：

Since there is no <scanned-result></scanned-result> element on your page, as charlietfl pointed out, you won't get any results.

Since your HTML markup is the following:

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

You are looking for an ID.

And the valid ID query in a CSS selector is a #, because of that you should query like:

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

CodePudding user response：

I've changed the iteration to fill the array with the lines inside the ID scanned-result. Would that help ?

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 >
    <div >
        <div  style="text-align: center;margin-bottom: 20px;">
            <div id="reader" style="display: inline-block;"></div>
            <div ></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>