如何在 JavaScript 中添加两个数字？

Question

所以我正在开发一个将摄氏度转换为开尔文（无响应）的温度转换器，我想将摄氏度输入的值添加到 273，但它认为它是一个字符串。 type="number" 不起作用，所以我不得不为此编写一个单独的代码。有什么帮助吗？这是我的代码：

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

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Answer 1

您有一个字符串和一个数字类型，javascript 将连接这些值而不是将它们相加，如果您希望将它们作为数字相加，则必须使用 parseInt() 将字符串转换为数字.

在您的 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Answer 2

input 中的值是字符串类型。在加法之前将其转换为数字

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>

Answer 3

只需替换以下代码

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

休息一下，您已经完成了检查输入是否为数字的工作另一个建议不是在更改时触发事件，而是在验证数字后触发它，这样 NaN 将是 o/p

如何在 JavaScript 中添加两个数字？

How to add two numbers in JavaScript?

html

javascript

operands