Входное значение не обновляется на странице при изменении - PullRequest
Новая
       12

Входное значение не обновляется на странице при изменении

0 голосов
/ 22 апреля 2020

Я должен сделать веб-страницу для школы, которая конвертирует температуру между по Цельсию и по Фаренгейту . Я попытался сделать это с 2 полями ввода, которые меняют значение в зависимости от значения другого поля ввода, когда я впервые что-то пишу в одно из полей ввода, оно работает, но потом, даже если в коде значение меняется, на странице это не появляется. Я новичок в javascript и html в целом, и я не знаю, что я делаю неправильно.

Это код: 

        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>

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 22 апреля 2020

Вы должны просто установить значение элемента, и все будет работать как положено.
Объяснение вы можете найти здесь . 

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;
  }
}
0 голосов
/ 22 апреля 2020

Некоторые пояснения в коде. Скажи мне, если тебе нужно больше. Это выглядит сложнее, но избегает встроенного JavaScript, что хорошо:) 

      // 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...