Get values from ID HTML and save in array

Question

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 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>

querySelectorAll('scanned-result') is looking for <scanned-result></scanned-result> elements that don't exist — charlietfl
– charlietfl, Commented Feb 7, 2022 at 20:17
Use a className and class selector if you have more than one with that id. Ids must be unique in a page — charlietfl
– charlietfl, Commented Feb 7, 2022 at 20:37

Esszed · Accepted Answer · 2022-02-07 20:58:56Z

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 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>

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

David Wolf · Accepted Answer · 2022-02-07 20:40:26Z

0

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')

answered Feb 7, 2022 at 20:40

David Wolf

1,7382 gold badges14 silver badges21 bronze badges

Comments

FelipeHSouza · Accepted Answer · 2022-02-07 20:48:56Z

0

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 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>

answered Feb 7, 2022 at 20:48

FelipeHSouza

3831 gold badge3 silver badges10 bronze badges

1 Comment

Michaelweston Over a year ago

Great I'm goin to try this out!! thank you!

Collectives™ on Stack Overflow

Get values from ID HTML and save in array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related