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.

Answer 1

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/

Answer 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);

Answer 3

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.