Измените несколько значений toString с помощью getElementsByClassName

Question

Так что я получаю 4 значения в виде чисел с:

    <h3 class="u-text-size-h6"> </h3>
    <div class="js-numstepper tiempo">
    <input  class="tiempos" type="number" min="0" max="60">
    </div>
</div>

и:

var tiempoInstruccion = document.getElementsByClassName('tiempos');

Затем я хочу преобразовать все значения в строки, потому что яесть функция, которая не работает с числами только с текстом.

я попробовал это:

var stringTiempo = tiempoInstruccion.toString();, а также попытался сделать это с циклом

основная проблемачто я имею с этой функцией:

var tiempoInstruccion = document.getElementsByClassName('tiempos');
var seleccionTiempo = [];

for (var i = 0; i < tiempoInstruccion.length; i++) {
        var element = tiempoInstruccion[i].toString();

        var strSel = element.options[element.selectedIndex].text;
        seleccionTiempo.push(strSel);
    }

мне нужно, чтобы эти значения были помещены в этот массив var seleccionTiempo = []

также попытался изменить element.options[element.selectedIndex].text; на element.options[element.selectedIndex].value;

я получаю это сообщение: TypeError: element.selectedIndex is undefined

и я уверен, что из-за массива это не строка.

Answer 1

вы можете использовать следующую функцию для извлечения ваших входных значений

var tiempoInstruccion = [];
var seleccionTiempo = [];

function updatevalues(){
  var tiempoInstruccion = document.getElementsByClassName('tiempos');
  seleccionTiempo = [];
  for(var i=0;i<tiempoInstruccion.length;i++){
    var val = tiempoInstruccion[i].value;
    if(val.length>0){
      seleccionTiempo.push(val);
    }
  }
  console.log(seleccionTiempo);
}

<div>
  <h3 class="u-text-size-h6"> </h3>
   <div class="js-numstepper tiempo">
    <input  class="tiempos" type="number" min="0" max="60">
  </div>
</div>
<div>
  <h3 class="u-text-size-h6"> </h3>
   <div class="js-numstepper tiempo">
    <input  class="tiempos" type="number" min="0" max="60">
  </div>
</div>
<div>
  <h3 class="u-text-size-h6"> </h3>
   <div class="js-numstepper tiempo">
    <input  class="tiempos" type="number" min="0" max="60">
  </div>
</div>
<div>
  <h3 class="u-text-size-h6"> </h3>
   <div class="js-numstepper tiempo">
    <input  class="tiempos" type="number" min="0" max="60">
  </div>
</div>
<div>
  <input type="button" value="Update" onclick="updatevalues()">
</div>

Answer 2

tiempos - это текстовое поле, а не поле выбора. Вы можете получить доступ к свойству options в текстовом поле. Используйте это. Это будет работать

var tiempoInstruccion = document.getElementsByClassName ('tiempos') [0]. value.toString ();

Answer 3

Я поместил какое-то пользовательское значение в ваш массив. Затем с помощью функции javascript map переберите все элементы, затем вставьте их в новый массив, сделав их строкой

var tiempoInstruccion = [56,67,57,52];
var seleccionTiempo = [];

tiempoInstruccion.map( item => {
  seleccionTiempo.push(item.toString());
})
console.log(seleccionTiempo)

Надеюсь, это поможет.