为什么我的计算器程序不起作用？ JavaScript 和 HTML 相关答案

【问题标题】：Why is my calculator program not working? JavaScript and HTML related为什么我的计算器程序不起作用？ JavaScript 和 HTML 相关
【发布时间】：2019-09-17 01:58:18
【问题描述】：

谁能帮我找出我的代码中的问题所在？

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>

而 JAVASCRIPT 是

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

如果有人可以帮助我，将不胜感激。

问题包括：

在输入栏中输入时，同一行中的其他内容不变。

第一个摄氏度输入中的任何数字的输出对于华氏温度为 NaN，对于开尔文温度为
[object HTMLInputElement]273。

【问题讨论】：

详见 Rin Minase 的回答。您忘记附加最重要的.value - 您所做的是检索指向要从中提取值的输入对象的指针。然而，试图用它来做数学是行不通的，并且会产生 NaN。作为一般规则，您需要在处理任何类型的输入类型元素（输入、按钮、文本区域、选择）时使用值字段。
这里已经解决了：stackoverflow.com/a/57966027/11700321
关于“在输入栏中输入时，同一行中的其他内容不会改变”，这是因为change只有在失去焦点后才会被触发（一些像jQuery / React这样的库会改变这种行为）。您可以考虑在您的addEventListener 中使用input。

标签： javascript html

【解决方案1】：

使用.value 检索输入中的值。然后使用parseInt()将其转换为要计算的数字。

使用您创建的相同 HTML：

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

【讨论】：

【解决方案2】：

您可以使用parseInt()。

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

它基本上将字符串转换为整数。对从元素中检索到的数字进行数学运算时需要。

【讨论】：

【解决方案3】：

根据您的其他问题....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);
}

在这里看到它的工作： https://jsfiddle.net/0Luvq4nx/1/

【讨论】：