javascript - Get values from multiple selections with querySelectorAll - Stack Overflow

admin2025-03-19 0

<!DOCTYPE html>
<html>
<head>

<script>
window.onload = function() {
    var data = document.querySelectorAll('span.data-01', 'span.data-02');
    for (var i=0;i<len;i++) {
        console.log(data[i].className + " " + data[i].childNodes[0].nodeValue) 
        //var one = parseInt(data[i].childNodes[0].nodeValue);
        //var two = parseInt(data[i].childNodes[0].nodeValue);  
    }  
    //total = one + two;
    //console.log(total); 
};
</script>

</head>
<body>
<div class="info">
<span class="data-01">9000</span>
<span class="data-02">6500</span>
</div>
</body>
</html>

How do you put each of these values into a variable to be outputted in the console log?

I want to be able to add values marked by class data-01 + data-02 (15500). For some reason only data-01 is shown in the console.

Answer
querySelectorAll () requires

this

'span.data-01', 'span.data-02'

should be this

'span.data-01, span.data-02'

<!DOCTYPE html>
<html>
<head>

<script>
window.onload = function() {
    var data = document.querySelectorAll('span.data-01', 'span.data-02');
    for (var i=0;i<len;i++) {
        console.log(data[i].className + " " + data[i].childNodes[0].nodeValue) 
        //var one = parseInt(data[i].childNodes[0].nodeValue);
        //var two = parseInt(data[i].childNodes[0].nodeValue);  
    }  
    //total = one + two;
    //console.log(total); 
};
</script>

</head>
<body>
<div class="info">
<span class="data-01">9000</span>
<span class="data-02">6500</span>
</div>
</body>
</html>

How do you put each of these values into a variable to be outputted in the console log?

I want to be able to add values marked by class data-01 + data-02 (15500). For some reason only data-01 is shown in the console.

Answer
querySelectorAll () requires

this

'span.data-01', 'span.data-02'

should be this

'span.data-01, span.data-02'

Share Improve this question edited Sep 22, 2013 at 1:01 asked Sep 21, 2013 at 22:53 rrrfusco 1,1195 gold badges19 silver badges46 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Just loop through the result and get the nodeValue of the text node:

var data = document.querySelectorAll('span.data-01,span.data-02');
var sum=0;
for (var i=0;i<data.length;i++) {
    console.log(data[i].className + " " + data[i].childNodes[0].nodeValue);
    sum=sum + parseFloat(data[i].childNodes[0].nodeValue);
}

Or:

var data = document.querySelector('div.info').childNodes;
var sum = 0;
for (var i = 0; i < data.length; i++) {
    if (data[i].nodeType == 1) {
        console.log(data[i].className + " " + data[i].childNodes[0].nodeValue);
        sum = sum + parseFloat(data[i].childNodes[0].nodeValue);
    }
}

What about:

var data = document.querySelectorAll('span.data-01, span.data-02');

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1742374379a210354.html

javascriptGet values from multiple selections with querySelectorAllStack Overflow

最新回复(0)