Форма начальной загрузки, выдающая неверные результаты - PullRequest
Новая
       3

Форма начальной загрузки, выдающая неверные результаты

2 голосов
/ 16 апреля 2019

Несмотря на отсутствие связи (насколько мне известно), при вводе числа Цельсия формула Фаренгейта будет выполняться и внедряться в выходные данные Цельсия, при этом правильная формула будет выводиться в выходные данные Фаренгейта, и наоборот при вводе Фаренгейтачисло.

Изображение Error Я пробовал несколько операторов if, но, похоже, они работают только для одного из выходов, а другой вообще не имеет никакого значения. 

**HTML//Bootstrap**

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">C°</span>
         <input type="number" class="form-control" id="cAmount" placeholder="Celsius">
    </div>
</div>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">F°</span>
        <input type="number" class="form-control" id="fAmount" placeholder="Fahrenheit">
    </div>
</div>              





<div class="form-group">
  <div class="input-group">
     <span class="input-group-addon">Celsius Temperature</span>
       <input type="number" class="form-control" id="celsius-result" disabled>

   </div>
</div>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">Fahrenheit Temperature</span>
        <input type="number" class="form-control" id="f-res" disabled>

    </div>
</div>

**Javascript**

let formSubmit = document.querySelector('#tempCalculator')

formSubmit.addEventListener('submit', runEvent);

function runEvent(e) {
let celInput = document.querySelector('#cAmount');
let fahInput = document.querySelector('#fAmount');
let celResult = document.querySelector('#celsius-result')
let fahResult = document.querySelector('#f-res');


//input

let fahVal = parseFloat((celInput.value * 9/5) + 32);

let celVal = parseFloat((fahInput.value - 32) * 5/9);

//output

celResult.value = celVal.toFixed(2);

fahResult.value = fahVal.toFixed(2);

//stop form refreshing
e.preventDefault();

}

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

Вот ссылка Codepen для полного приложения: https://codepen.io/str-99/pen/NmwXJz

1 Ответ

1 голос
/ 16 апреля 2019

Если я правильно вас понимаю, это один из способов выполнить то, что вы пытаетесь: 

let formSubmit = document.getElementById('tempCalculator');

formSubmit.addEventListener('submit', runEvent);

function runEvent(e) {
    let celInput = document.querySelector('#cAmount');
    let fahInput = document.querySelector('#fAmount');
    let celResult = document.querySelector('#celsius-result')
    let fahResult = document.querySelector('#f-res');

    //input
    let fahVal = parseFloat((celInput.value * 9/5) + 32);

    let celVal = parseFloat((fahInput.value - 32) * 5/9);

    //output

    celResult.value = Number(fahInput.value) > 0 ? celVal.toFixed(2) : '';

    fahResult.value = Number(celInput.value) > 0 ? fahVal.toFixed(2) : '';

    //reset input boxes
    document.getElementById('cAmount').value = '';
    document.getElementById('fAmount').value = '';

    e.preventDefault();
}

Тернарный оператор отлично работает в таких случаях. Мы можем просто изменить значение на пустую строку, когда это не правильный / желаемый ввод. А для дополнительной меры очистка полей ввода для «сброса» после каждого расчета.

...