Как получить значение определенного узла в nodeList?

Question

Так что я использую querySelectorAll на четырех входах на странице (высота, вес, возраст, пол) и добавляя событие изменения каждому.

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

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

Если бы я тогда хотел создать строку всех значений предметов, во время цикла, как бы я это сделать?

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

В принципе, я не знаю, как я получаю определенное значение входов из цикла без использования что-то, как родовые в качестве индекса.

Answer 1

«Если бы я тогда хотел создать строку всех элементов значения»

Вы можете JSON.stringify их. Кроме того, один подход, который я часто использую при работе с наборами в Javascript, - это повторение с помощью forEach в массивах.

Что-то, как это будет делать это без особых сложностей:

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

Отредактировано:

кажется, что querySelectorAll реализует forEach начиная с ES5, поэтому нет никакой необходимости в приличном браузере, чтобы преобразовать querySelectorAll результаты с Array.from.

Answer 2

querySelectorAll возвращает nodeList, который может быть закольцован с использованием цикла ECMAScript 5 forEach, но вам потребуется что-то, что может идентифицировать каждый элемент. id, как правило, лучший способ:

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

Answer 3

Ну вы вид лечения тройной оператор ? : неправильно. Тем не менее, вот мой способ реализации. Ответы, приведенные выше, будут делать, но мне нравится сохранять сопоставленный объект, который не нуждается в том, чтобы я писал выражение случая, это тоже более чисто.

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

Работа скрипку здесь: https://jsfiddle.net/aminajani17/abbxbLoo/