How to dynamically use a form in javascript code

Question

I would like to know how I can call a function using the dynamic result of what I typed in a form! I managed to transform this value to be used but when I press the button it doesn't change and stays statically at 0 (as if I hadn't typed anything)

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

Note that if I type, for example, 75 it will give a result and if I type 91 it will show something else

The switch would need to be inside your method. It does not just keep running. It runs once and is done. So onclick on the button, call a function, run the code — epascarello
– epascarello, Commented Apr 27, 2020 at 16:32

Minasie Shibeshi · Accepted Answer · 2020-04-27 16:44:46Z

1

Put your JavaScript code inside a function so it can be called later in time

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

And try this on your 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>

Your button isn't inside the form, so pressing the button won't submit the form
And the JavaScript is only called when the website is first loaded. Subsequent form submissions now trigger the newly created JavaScript function.

edited Apr 27, 2020 at 16:44

answered Apr 27, 2020 at 16:39

Minasie Shibeshi

5281 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rodrigo Liva Over a year ago

thank you it worked! would you know if i deleted the number i typed it would return to the initial message? because I put a condition in the switch function of "case finalPound == 0:" but it only works if I press the button

Minasie Shibeshi Over a year ago

Yeah, that is expected. You can maybe try this. Remove the button. And change your input tag to this. <input type="text" onchange="changeValue()" id="fname" name="fname" placeholder="digite seu peso"> now it instantly changes when you type on the input

Collectives™ on Stack Overflow

How to dynamically use a form in javascript code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related