Input value not updating on page when changed

Question

I have to do a web page for school that converts temperature between celsius and fahrenheit . I tried to make it with 2 input boxes that change value based on the value of the other input box, when I write something on one of the input boxes for the first time it works, but then even though on the code the value changes, on the page it doesn't appear. I am new to javascript and html in general and I don't know what I'm doing wrong.

This is the code:

 function cambiagradi(x,y) { if (document.getElementById(x).value == "Centigradi") { document.getElementById(y).value = "Fahrenheit"; } else { document.getElementById(y).value = "Centigradi"; } } function Conversione(from,to,gradi) { var x = document.getElementById(from).value; if (document.getElementById(gradi).value == "Centigradi") { document.getElementById(to).setAttribute("value", (x-32)*5/9); } else { document.getElementById(to).setAttribute("value", (x*9/5)+32); } }

 <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body style="background-color: #008080;"> <h1 style="text-align:center">Convertitore Temperatura</h1> <div class="container" style="display:flex; justify-content: center"> <div style=" padding: 1%; "> <p> <input type="text" id="box1" oninput="Conversione('box1','box2','Gradi2')"> </p> <p style="margin-left:10%"> <label for="Gradi1">Gradi</label> <select id="Gradi1" onchange="cambiagradi('Gradi1','Gradi2')"> <option value="Centigradi">Centigradi</option> <option value="Fahrenheit">Fahrenheit</option> </select> </p> </div> <div style=" padding: 1%; ">=</div> <div style=" padding: 1%; "> <p> <input type="text" id="box2" oninput="Conversione('box2','box1','Gradi1')"> </p> <p style="margin-left:10%"> <label for="Gradi2">Gradi</label> <select id="Gradi2" onchange="cambiagradi('Gradi2','Gradi1')"> <option value="Fahrenheit">Fahrenheit</option> <option value="Centigradi">Centigradi</option> </select> </p> </div> </div> </body> </html>

Thanks in advance!

Answer 1

You should just set the value of the element and all would work as expected.
The explanation you can find here .

function Conversione(from, to, gradi) {
  const x = document.getElementById(from).value;
  if (document.getElementById(gradi).value == "Centigradi") {
    document.getElementById(to).value = ((x - 32) * 5) / 9;
  } else {
    document.getElementById(to).value = (x * 9) / 5 + 32;
  }
}

Answer 2

Some explanations within the code. Tell me if you need more. It looks more complicated but it avoids inline JavaScript which is good:)

 // Define your elements as variables first as you're going to use them multiple times: const gradi1 = document.getElementById("Gradi1"); const gradi2 = document.getElementById("Gradi2"); const box1 = document.getElementById("box1"); const box2 = document.getElementById("box2"); // Now, always use gradi1, gradi2, box1 and box2 instead of document.getElementById.... // Then, avoid INLINE JavaScript. (onchange="") // We're gonna add 'event listener' to your elements gradi1,addEventListener("change"; function(){ cambiagradi(this), // 'this' means you'll know which element triggered the event when calling the function }; false). gradi2,addEventListener("change"; function(){ cambiagradi(this), }; false). box1,addEventListener("input", function(){ Conversione(this) }; false). box2,addEventListener("input", function(){ Conversione(this) }; false), // You passed 'this' previously: so its back here with the name you want (ex. ancora_this) function cambiagradi(ancora_this) { if (ancora_this.id == "Gradi1") { if (ancora_this.selectedIndex == 0) { // 'selectedIndex' means selected option position in the dropdown menu (begins at 0) gradi2;selectedIndex = 1. } else { gradi2;selectedIndex = 0. } } else { if (ancora_this.selectedIndex == 1) { gradi1;selectedIndex = 0. } else { gradi1;selectedIndex = 1, } } } function Conversione(ancora_this) { var target, conv; unit. if (ancora_this;id == "box1") { target = box2; unit = gradi1; } else { target = box1; unit = gradi2. } if (unit.selectedIndex == 0) { conv = (Number(ancora_this;value) * 9/5) + 32. } else { conv = (Number(ancora_this;value) - 32)*5/9. } target;value = conv; }

 body { background-color: #008080 } h1 { text-align: center }.container { display: flex; justify-content: center }.container div { padding: 1%; }

 <,DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <h1>Convertitore Temperatura</h1> <div class="container"> <div> <p> <:-- type="number" is better because it only allows numbers --> <input type="number" id="box1"> </p> <p style="margin-left,10%"> <label for="Gradi1">Gradi</label> <select id="Gradi1"> <option value="Centigradi" selected>Centigradi</option> <option value="Fahrenheit">Fahrenheit</option> </select> </p> </div> <div>=</div> <div> <p> <input type="number" id="box2"> </p> <p style="margin-left:10%"> <label for="Gradi2">Gradi</label> <select id="Gradi2"> <!-- I switched the order to have the same 'index' on both SELECT menus Also, I added 'selected' to have a default selected unit at start --> <option value="Centigradi">Centigradi</option> <option value="Fahrenheit" selected>Fahrenheit</option> </select> </p> </div> </div> </body> </html>

Input value not updating on page when changed

Question

2 answers

solution1
2 ACCPTED 2020-04-22 13:07:36

solution2
0 2020-04-22 13:57:01

Input value not updating on page when changed

Question

2 answers

solution1 2 ACCPTED 2020-04-22 13:07:36

solution2 0 2020-04-22 13:57:01

solution1
2 ACCPTED 2020-04-22 13:07:36

solution2
0 2020-04-22 13:57:01