How to add two numbers in JavaScript?

Question

So I am working on a temperature converter which converts Celsius to Kelvin (not responsive), and I want to add the value of the Celsius input to 273 but it's considering it a string. type="number" isn't working so I had to write a seperate code for that. Any help? This is my code:

<html>
    <head>
        <title> 
            Celsius to Kelvin converter 
        </title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            
            .converter {
                display: flex;
                flex-direction: row;
                width: 85%;
                position: fixed;
                left: 15%;
                top: 27%;
            }

            .forum {
                width: 30%;
                height: 70px;
                background: white;
                margin-right: 150px;
            }

            .heading {
                width: 85%;
                margin-left: 7.5%;
                text-align: center;
                position: fixed;
                top: 15%;
            }

        
        </style>
        <div class="heading bg-warning">
                <h3> Convert </h3>
            </div>
        <div class="converter">
            <div class="Celsius">
                <div class="input-group">
                        <span class="input-group-text">Celsius</span>
                        <textarea type="number" class="form-control forum celsii" aria-label="Celsius" onkeyup="checkInput(this)"></textarea>
                </div>
                    
            </div>
            <div class="kelvin">
                <div class="input-group overwrite">
                        <span class="input-group-text">Kelvin</span>
                        <textarea class="form-control forum kelvii" aria-label="Kelvin" disabled readonly></textarea>
            </div>
        </div>

        <script>
            const celsii = document.getElementsByClassName('celsii')[0];
            const kelvii = document.getElementsByClassName('kelvii')[0];

            celsii.onchange = () => {
                kelvii.value = celsii.value + 273;
            }

            function checkInput() {
            var invalidChars = /[^0-9]/gi
  if(invalidChars.test(celsii.value)) {
            celsii.value = celsii.value.replace(invalidChars,"");
            alert('Invalid character');
      }
}
        </script>
    </body>
</html>

brk · Accepted Answer · 2021-07-25 06:49:58Z

The value from input is of type string. Convert it to number before addition

const celsii = document.getElementsByClassName('celsii')[0];
const kelvii = document.getElementsByClassName('kelvii')[0];

celsii.onchange = () => {
  const getInputVal = Number(celsii.value)
  kelvii.value = !isNaN(getInputVal) ? getInputVal + 273 : alert('Not a number');
}

function checkInput() {
  var invalidChars = /[^0-9]/gi
  if (invalidChars.test(celsii.value)) {
    celsii.value = celsii.value.replace(invalidChars, "");
    alert('Invalid character');
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.converter {
  display: flex;
  flex-direction: row;
  width: 85%;
  position: fixed;
  left: 15%;
  top: 27%;
}

.forum {
  width: 30%;
  height: 70px;
  background: white;
  margin-right: 150px;
}

.heading {
  width: 85%;
  margin-left: 7.5%;
  text-align: center;
  position: fixed;
  top: 15%;
}

<div class="heading bg-warning">
  <h3> Convert </h3>
</div>
<div class="converter">
  <div class="Celsius">
    <div class="input-group">
      <span class="input-group-text">Celsius</span>
      <textarea type="number" class="form-control forum celsii" aria-label="Celsius" onkeyup="checkInput(this)"></textarea>
    </div>

  </div>
  <div class="kelvin">
    <div class="input-group overwrite">
      <span class="input-group-text">Kelvin</span>
      <textarea class="form-control forum kelvii" aria-label="Kelvin" disabled readonly></textarea>
    </div>
  </div>

Nilesh Lathe · Accepted Answer · 2021-07-25 06:55:57Z

0

just replace following code

celsii.onchange = () => {
  kelvii.value = parseInt(celsii.value) + 273;
}

rest you have done good job as your are checking whether input is Number Or not One more suggestion instead of triggering event on change you may trigger it after validating number so NaN will be o/p

answered Jul 25, 2021 at 6:55

Nilesh Lathe

1525 bronze badges

Comments

dale landry · Accepted Answer · 2021-07-25 06:48:05Z

You have a string and a number type, javascript will concatenate those values instead of adding them, you must convert the string to a number using parseInt() if you wish to add them as numbers.

Change the following line in your JS: kelvii.value = parseInt(celsii.value) + 273;

const celsii = document.getElementsByClassName('celsii')[0];
const kelvii = document.getElementsByClassName('kelvii')[0];

celsii.onchange = () => {
  kelvii.value = parseInt(celsii.value) + 273;
}

function checkInput() {
  var invalidChars = /[^0-9]/gi
  if (invalidChars.test(celsii.value)) {
    celsii.value = celsii.value.replace(invalidChars, "");
    alert('Invalid character');
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.converter {
  display: flex;
  flex-direction: row;
  width: 85%;
  position: fixed;
  left: 15%;
  top: 27%;
}

.forum {
  width: 30%;
  height: 70px;
  background: white;
  margin-right: 150px;
}

.heading {
  width: 85%;
  margin-left: 7.5%;
  text-align: center;
  position: fixed;
  top: 15%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="heading bg-warning">
  <h3> Convert </h3>
</div>
<div class="converter">
  <div class="Celsius">
    <div class="input-group">
      <span class="input-group-text">Celsius</span>
      <textarea type="number" class="form-control forum celsii" aria-label="Celsius" onkeyup="checkInput(this)"></textarea>
    </div>

  </div>
  <div class="kelvin">
    <div class="input-group overwrite">
      <span class="input-group-text">Kelvin</span>
      <textarea class="form-control forum kelvii" aria-label="Kelvin" disabled readonly></textarea>
    </div>
  </div>

Collectives™ on Stack Overflow

How to add two numbers in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related