Search code examples
javascripthtmlbootstrap-form-helper

Bootstrap form outputting wrong results

Despite not being linked (to my knowledge), when inputting the Celsius number, the Fahrenheit formula will run and be implemented to the Celsius output, with the correct formula being outputted on the Fahrenheit output, and vice versa when inputting a Fahrenheit number.

Image Error I have tried several if statements but they only seem to work for one of the outputs with the other having no value result at all.

**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();

}

Expected would be just to have one correct value appear in the corresponding output, this does happen, but an incorrect value appears in the unexpected output.

Here's a Codepen link for the full application: https://codepen.io/str-99/pen/NmwXJz

Solution

  • If I'm understanding you correctly this is one way to accomplish what you're trying:

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

    The ternary operator works great for instances like this. We can simply change the value to an empty string when it's not the right/desired input. And for added measure clearing out the input boxes to 'reset' after each calculation.