To update the output value in real time

Question

Hello, in an apostille I’m reading you have an excerpt to update the output value based on an input type="range". It has the codes and everything, but although it’s the same (or at least it seems), I can’t see why it doesn’t work so if possible someone could give me a light?

Follow the fildset code where input and output are;

<fieldset class="tamanhos">
    <legend>Escolha o Tamanho:</legend>
    <input type="range" min="36" max="46" step="2" name="tamanho" id="tamanho">
    <output for="tamanho" name="valortamanho" id="valortamanho">42 </output>
</fieldset>

Javascript code;

 var inputTamanho = document.querySelector('[name=tamanho]')
 var outputTamanho = document.querySelector('[name=valortamanho]')
 /*pg 199*/
function mostraTamanho(){
    outputTamanho.value = inputTamanho.value
}

inputTamanho.oninput = mostraTamanho

Answer 1

Try to use the oninput directly in this way function:

window.onload = function() {
  var inputTamanho = document.querySelector('[name=tamanho]');
  var outputTamanho = document.querySelector('[name=valortamanho]');
  inputTamanho.oninput = function() {
    outputTamanho.value = inputTamanho.value;
    console.log(inputTamanho.value);
  }
}

<fieldset class="tamanhos">
  <legend>Escolha o Tamanho:</legend>
  <input type="range" min="36" max="46" step="2" name="tamanho" id="tamanho">
  <output for="tamanho" name="valortamanho" id="valortamanho">42 </output>
</fieldset>