Как динамически использовать форму в javascript коде

Question

Я хотел бы знать, как я могу вызвать функцию, используя динамический c результат того, что я набрал в форме! Мне удалось преобразовать это значение для использования, но когда я нажимаю кнопку, оно не меняется и остается статически на 0 (как будто я ничего не печатал)

HTML:

<div id="bloco">
      <h1>QUAL É SUA CATEGORIA NO UFC</h1>
      <p id="resultPound">Coloque seu peso e vamos transformar em libras para descobrir em que categoria do UFC você lutaria!</p>
      <form> <input type="text" id="fname" name="fname" placeholder="digite seu peso"><br></form>
      <button>Confirmar</button>
      <script src="script.js"></script>
   </div>

Javascript:

var teste = document.getElementById("fname").value;  
function kilostoPounds(teste) { return ((teste * 2.2046).toFixed()) }
const finalPound = kilostoPounds(teste);


switch (true) {
    case finalPound <= 123:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Mosca</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 135:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Galo</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 145:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Pena</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 155:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Leve</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 171:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Meio Medio</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 185:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Medio</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 205:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Meio Pesado</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 265:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Pesado</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    default: document.getElementById("resultPound").innerHTML = "Digite um peso correto";
}

Обратите внимание, что если я наберу, например, 75, это даст результат, а если я наберу 91, то это покажет что-то еще

Answer 1

Поместите свой код JavaScript в функцию, чтобы ее можно было вызвать позже

function updateValue() {
    // Your Js code here
}

И попробуйте это на своем html

<div id="bloco">
  <h1>QUAL É SUA CATEGORIA NO UFC</h1>
  <p id="resultPound">Coloque seu peso e vamos transformar em libras para descobrir em que categoria do UFC você lutaria!</p>
  <form onsubmit="updateValue()"> 
      <input type="text" id="fname" name="fname" placeholder="digite seu peso">
      <br>
      <button>Confirmar</button>
  </form>
  <script src="script.js"></script>
</div>

• Ваш Кнопка не находится внутри формы, поэтому нажатие кнопки не отправит форму
• . И JavaScript вызывается только при первой загрузке веб-сайта. Последующие представления формы теперь вызывают вновь созданную функцию JavaScript.