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.

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.

• javascript
• nodelist
• selectors-api

4 Answers 4

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/aminajani17/abbxbLoo/

"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 plexity:

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.

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

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