2

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

  • I don't see your error. When inputting the Celsius number, the Fahrenheit formula will run and be implemented to the Fahrenheit Temperature output not Celsius Temperature – Minh Nguyen Apr 16 at 0:14
  • I've attached an image to show you what displays on my screen. – Steve Roe Apr 16 at 0:17
  • Your return in image is true. celInput = 10, fahVal = parseFloat((celInput.value * 9/5) + 32) = 50 and Fahrenheit Temperature return 50. fahInput = 0, celVal = parseFloat((fahInput.value - 32) * 5/9) = -17,78 and Celsius Temperature return -17,78. No error in here – Minh Nguyen Apr 16 at 0:22
  • So even if I'm not inputting a value it will still register it as 0 then? What would be the best way to work around this would you suggest? – Steve Roe Apr 16 at 0:28
  • I have used an if statement and have resolved the issue. Thank you for highlighting that for me, that's really helped. – Steve Roe Apr 16 at 0:30
1

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.

  • 1
    Perfect thank you, I had resolved the issue already with a similar idea. I just couldn't find a resolved button anywhere) but thank you! Great to see it in the form of the ternary operator. – Steve Roe Apr 16 at 1:17
  • @SteveRoe Glad to hear you resolved it! Ternaries are a personal favorite from a less code to write perspective haha. Hope it helps some! – CoderLee Apr 16 at 1:20
  • Absolutely, I am aiming to use them more! – Steve Roe Apr 16 at 2:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.