Why is my calculator program not working? JavaScript and HTML related

Question

Can anyone help me identify what the problem is in my code?

HTML

  <section>
      <!--- Celsius, Fahrenheit, Kelvin  -->
        <table>

          <tr>
            <td>&#176C</td>
            <td>&#176F</td>
            <td>&#176K</td>
          </tr>

          <tr>
              <td><label for="celsius"></label><input type="number" id="celsius"/> </td>
              <td id="fahr1"></td>
              <td id="kelv1"></td>
          </tr>

          <tr>
            <td>later</td>
            <td> <input type="number" id="fahrenheit"/> </td>
            <td>later</td>
          </tr>

        </table>
    </section>
    <script src="js/main.js"></script>

and the JAVASCRIPT is

// Gets Celsius and returns Kelvin
let celsin1 = document.getElementById('celsius');
let fahrout1 = document.getElementById('fahr1');
let kelvout1 = document.getElementById('kelv1');
let newfahr1 = 0;
let newkelv1 = 0;
function celstokelv1(){ newkelv1 = celsin1 + 273;
                            return newkelv1}
function celstofahr1(){newfahr1 = (9/5) * celsin1 + 32;
                            return newfahr1}

function change1() {
    fahrout1.innerHTML = '<td id="fahr1">'+ celstofahr1() +'</td>';
    kelvout1.innerHTML = '<td id="kelv1">' + celstokelv1() + '</td>'
    }

celsin1.addEventListener('change', change1, false);

If anyone can help me, it would be much appreciated.

Problems include:

When typing into the input bar, the other ones in the same row do not change.

Output for any number into the first Celcius input is NaN for Fahrenheit and
[object HTMLInputElement]273 for Kelvin.

See Rin Minase's answer for details. You have forgotten to attach the all-important .value - what you have done is retrieve a pointer to the input object that you wanted to pull a value from. However, attempting to do maths with that doesn't work and produces the NaN. As a general rule you need to use the value field whenever you are dealing with any type of input-type element (input, button, textarea, select). — Robidu
– Robidu, Commented Sep 17, 2019 at 2:34
This has already been solved here: stackoverflow.com/a/57966027/11700321 — EGC
– EGC, Commented Sep 17, 2019 at 2:42
Regarding "When typing into the input bar, the other ones in the same row do not change", it is because change is only fired after losing focus (which some libraries like jQuery / React will change this behaviour). You may consider using input in your addEventListener. — Sunny Pun
– Sunny Pun, Commented Sep 17, 2019 at 2:45

Rin Minase · Accepted Answer · 2019-09-17 02:23:55Z

2

Use .value to retrieve the value inside your input. Then use parseInt() to convert it into a number to be calculated.

Using the same HTML you created:

let celsin1 = document.getElementById('celsius');
let fahrout1 = document.getElementById('fahr1');
let kelvout1 = document.getElementById('kelv1');

let newfahr1 = 0;
let newkelv1 = 0;

function celstokelv1(){ 
    return parseInt(celsin1.value) + 273;
}

function celstofahr1(){
    return (9/5) * parseInt(celsin1.value) + 32;
}

function change1() {
    fahrout1.innerHTML = '<td id="fahr1">'+ celstofahr1() +'</td>';
    kelvout1.innerHTML = '<td id="kelv1">' + celstokelv1() + '</td>'
}

celsin1.addEventListener('change', change1, false);

answered Sep 17, 2019 at 2:23

Rin Minase

3382 gold badges5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rojo · Accepted Answer · 2019-09-17 02:11:35Z

0

You can use parseInt().

var val = parseInt(document.getElementById("farenheit").value);

It basically converts the string into an integer. Required while doing math to numbers retrieved from elements.

answered Sep 17, 2019 at 2:11

Rojo

2,8791 gold badge20 silver badges37 bronze badges

Comments

EGC · Accepted Answer · 2019-09-17 02:43:07Z

As per your other question.... Basic Input/Output help for online calculator I am developing

HTML

<section>
   <!--- Celsius, Fahrenheit, Kelvin  -->
   <table>
     <tr>
       <td>&#176C</td>
       <td>&#176F</td>
       <td>&#176K</td>
     </tr>
     <tr>
       <td> <input type="number" id="celsius"/> </td>
       <td id="fahr1"></td>
       <td id="kelv1"></td>
     </tr>
     <tr>
       <td id="celc2">-</td>
       <td> <input type="number" id="fahrenheit" /> </td>
       <td id="kelv2">-</td>
     </tr>
   </table>
 </section>

JavaScript

const celsius = document.getElementById('celsius');
const fahrenheit = document.getElementById('fahrenheit');

celsius.addEventListener('change', (event) => {
  convertFromCelsius();
});

fahrenheit.addEventListener('change', (event) => {
  convertFromFahrenheit();
});

function convertFromCelsius() {
    var fahr1 = document.getElementById("fahr1");
    var kelv1 = document.getElementById("kelv1");
    fahr1.textContent = parseInt(celsius.value) * (9/5) + 32;
    kelv1.textContent = parseInt(celsius.value) + 273.15;
}

function convertFromFahrenheit() {
    var celc2 = document.getElementById("celc2");
    var kelv2 = document.getElementById("kelv2");
    celc2.textContent = (parseInt(fahrenheit.value) - 32) * (5/9);
    kelv2.textContent = (parseInt(fahrenheit.value) +  459.67) * (5/9);
}

See it working live here: https://jsfiddle.net/0Luvq4nx/1/

Collectives™ on Stack Overflow

Why is my calculator program not working? JavaScript and HTML related

HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related