CODEWITHSUNDEEP
javascriptnodelistselectors-api
user3521314
user3521314

Reputation: 504

How to get value of certain node in nodeList?

So I'm using querySelectorAll on four inputs on the page (height, weight, age, gender), and adding a change event to each.

var inputs = document.querySelectorAll('input');

input.addEventListener('change', changeValue));

If I then wanted to create a string of all of the items values, during the loop, how would I do that?

function changeValue() {
  this.name === 'weight' ? this.value + 'lbs' + this.name === 'height' ? this.value + 'inches';
}

Basically, I'm not sure how I get a specific inputs value out of the loop without using something as generic as an index.

Upvotes: 1

Views: 9642

Answers (4)

gene b.
gene b.

Reputation: 11984

If you're using TSX, this works:

        let elements = document.querySelectorAll("input[name=abc]");
        if (elements.length) {
            // e.g. first one
            console.log('value = ' + (elements[0] as HTMLInputElement).value);
        }

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5620

"If I then wanted to create a string of all of the items values"

You could JSON.stringify them. Also, one approach that I use a lot when dealing with sets in Javascript is to iterate with forEach in arrays.

Something like this would do it without much complexity:

function getInputItems(inputs) {
    var inputItems = {};
    Array.from(inputs).forEach(function(item) {
        inputItems[item.name] = inputItems[item.value];
    });
    return JSON.stringify(inputItems);
}

Edited:

It seems that querySelectorAll implements forEach since ES5, so there is no need on a decent browser to convert querySelectorAll results with Array.from.

Upvotes: 1

Amin Mohamed Ajani
Amin Mohamed Ajani

Reputation: 294

Well you're kind of treating the ternary operator ? : wrong. Nevertheless, here's my way of implementation. The answers provided above would do but I like to keep a mapped object which won't need me to write a case expression it's cleaner too.

    var inputs = document.querySelectorAll('input');
  //var inputs = Array.prototype.slice.call(document.querySelectorAll('input')) for older browsers not supporting forEach on Node lists


    function changeValue(){
      var mapped = {
         "weight":" lbs",// note the extra space is intentional
         "height":" inches" // note the extra space is intentional
      }
      this.value = this.value + mapped[this.name];

    }
    inputs.forEach(function(e){
        e.addEventListener('change', changeValue);
    })

Working fiddle here: https://jsfiddle.net/aminajani17/abbxbLoo/

Upvotes: 3

Scott Marcus
Scott Marcus

Reputation: 65808

querySelectorAll returns a nodeList that can be looped using the ECMAScript 5 forEach loop, but you will need something that can identify each element. An id is usually the best way:

var inputs = document.querySelectorAll('input');
var results = "";

inputs.forEach(function(input){
   input.addEventListener('change', changeValue));

   var postfix = "";

   // check the current input's id and determine the correct
   // unit of measurement/qualification for the element's value
   switch(input.id){
     case "height" :
       postfix = "inches";
       break;
     case "weight" :
       postfix = "lbs";       
       break;
     case "age" :
       postfix = "years";       
       break;
     case "gender" :
       postfix = "gender";       
       break; 
   }

   // Append the input's value and unit of measurement/qualification
   // to a string
   results += "," + input.value + postfix;
});

// output the final string
console.log(results);

Upvotes: 0

Related Questions