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!

Hello Leon, Welcome to the community. Could you please explain what exactly is an issue. Would you like to update value of text input on both sides? Also, why there select is used twice? — Charu Rajput, Apr 22 '20 at 13:00
Instead of setting value as an attribute, set as `document.getElementById(to).value = (x - 32) * 5 / 9;`. Similarly for else condition. — Charu Rajput, Apr 22 '20 at 13:06

score 3 · Accepted Answer · edited Apr 22 '20 at 15:33

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

score 0 · Answer 2 · answered Apr 22 '20 at 13:57

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

2 Answers2