Преобразователь температуры с помощью JavaScript


Это одна из моих первых простых проектов на JavaScript. Обратная связь ценится! В основном, каждый раз, когда выбор изменяется, результат отображается.

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>
 </head>
 <body>
  </select>
  <div id="sect">
   <section>
    <select onchange="onChange('from'); calculate()" id="selectFrom">
     <option value="Celcius">Celcius</option>
     <option value="Farenheit">Farenheit</option>
     <option value="Kelvin">Kelvin</option>
    </select>
    <span class="toText">to</span>
    <select onchange="onChange('to'); calculate()" id="selectTo">
     <option value="Celcius">Celcius</option>
     <option value="Farenheit">Farenheit</option>
     <option value="Kelvin">Kelvin</option>
    </select>
   </section>
   <section>
    <input type="text" id="from" onchange="calculate()"> <span 
id="toText"> to </span> <input type="text" id="to">
   </section>
   <br>

   <section>
    <p id="results"></p>
   </section>
  </div>
  <script>
   onChange('from');
   onChange('to');
   function onChange(fromOrTo) {
    if(fromOrTo === 'from') {
     document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
    } else if(fromOrTo === 'to') {
     document.getElementById("to").placeholder = document.getElementById("selectTo").value;
    } 
   }
   function calculate() {
    var from = document.getElementById("selectFrom");
    var to = document.getElementById("selectTo");
    var fromValue = parseInt(document.getElementById("from").value);
    var toValue = parseInt(document.getElementById("to").value);
    if(from.value == "Celcius") {
     if(to.value == "Farenheit") {
      result = ((fromValue * 9)/5) + 32;
     }
     else if(to.value == "Kelvin") {
      result = fromValue + 273;
     } else {
      result = "Cannot calculate!";
     }
     document.getElementById("to").value = result.toFixed(2);
    }
    else if(from.value == "Farenheit") {
     if(to.value == "Celcius") {
      result = ((fromValue - 32) * 5)/9
     }
     else if(to.value == "Kelvin") {
      result = ((fromValue + 459.67) * 5)/9;
     } else {
      result = "Cannot calculate!";
     }
     document.getElementById("to").value = result.toFixed(2);
    }
    else if(from.value == "Kelvin") {
     if(to.value == "Celcius") {
      result = fromValue - 273;
     }
     else if(to.value == "Farenheit") {
      result = 1.8 * (fromValue-273) + 32;
     } else {
      result = "Cannot calculate!";
     }
     document.getElementById("to").value = result.toFixed(2);
    }
   }
  </script>
 </body>
 </html>



Комментарии
1 ответ

Некоторые незначительные замечания:


  • Это хорошая идея, чтобы проверить ваш HTML-проекты с валидатором некоторого рода (например: https://validator.w3.org/). Есть некоторые незначительные ошибки в вашем файле, который легко может быть пойман любой валидатор.

  • Обычно вы хотите сохранить содержимое, представление и поведение отделяется от другой. Это означает, что вы поставили скрипты, CSS и т. п. в свои файлы, а не иметь их все в файл HTML.

  • С точки зрения юзабилити, я думаю, было бы лучше иметь явного контроля над тем, когда происходит превращение. Е. Г. с помощью кнопки или что-то аналогичный.

2
ответ дан 2 марта 2018 в 03:03 Источник Поделиться