Javascript：返回 NaN答案

【问题标题】：Javascript: returns NaNJavascript：返回 NaN
【发布时间】：2020-02-23 18:03:27
【问题描述】：

由于我对编程很陌生，我决定做一些 Javascript 练习，比如“分钟到秒”转换器。
如果我理解正确，“m”不是数字，因为它没有在任何地方声明。 'm'（分钟数）应该是用户的输入。但是，如果我给 'm' 一个值（例如 const m = '0'），用户将无法更改 'm' 的值。

我怎样才能摆脱 NaN 错误，（但仍然允许用户插入一个数字）？另外，这是进行此练习的好/正确方法吗？

const convertMinutes = document.getElementById('convertButton');
const m = document.getElementById('input');

convertMinutes.addEventListener('click', convert);
function convert(m){
    return (m * 60);
}
document.getElementById('seconds').innerHTML = convert() + ' seconds';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>Convert minutes into seconds!</label>
    <input type="number" id="input">
    <button id="convertButton">Convert</button>
    <br>
    <label id="seconds"></label>

    <script type="text/javascript" src="javascript.js"></script>
</body>
</html>

【问题讨论】：

你也没有向convert()传递任何东西。
您的事件监听器（点击处理程序）调用您的函数，但没有对返回值做任何事情
你只是想要一个不是 NaN 的默认值吗？
另外，为什么这里的所有答案都被否决了？
@Jacob 有人想惩罚所有回答他们认为应该关闭的问题的回答者。

标签： javascript nan

【解决方案1】：

您需要读取带有 id 输入的元素的值，并将其解析为整数或浮点数（下面我们将其解析为整数）。如需更多信息，请提供信息parseInt。请检查以下sn-p：

const convertMinutes = document.getElementById('convertButton');

// Here you get a reference to the DOM element with id input
const input = document.getElementById('input');

// Here you register an event handler for the click event on DOM element with id convertButton 
convertMinutes.addEventListener('click', convert);

function convert(){
   // Here you parse the input as an Int and you multiply it by 60
   var seconds = parseInt(input.value,10) * 60;
   
   // Here you set the actual value to the DOM element with id seconds
   document.getElementById('seconds').innerHTML = seconds + ' seconds';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>Convert minutes into seconds!</label>
    <input type="number" id="input">
    <button id="convertButton">Convert</button>
    <br>
    <label id="seconds"></label>

    <script type="text/javascript" src="javascript.js"></script>
</body>
</html>

【讨论】：

感谢您的简单解决方案和出色的解释！显然我什至不需要在这里使用 return。
@Appelpeer15 不客气！我很高兴能帮上忙！
@downvoter....如果您留下任何评论来解释您投反对票的原因，那将会很有帮助。只是在不发表任何评论的情况下投票对任何人都没有帮助。
@Christos 很确定这只是一些巨魔。对每一个答案都投了反对票，没有发表评论。

【解决方案2】：

试试这个

const convertMinutes = document.getElementById('convertButton');
const m = document.getElementById('input');

convertMinutes.addEventListener('click', convert);
function convert(){
    const seconds = m.value * 60
    document.getElementById('seconds').innerHTML = `${seconds } seconds`;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>Convert minutes into seconds!</label>
    <input type="number" id="input">
    <button id="convertButton">Convert</button>
    <br>
    <label id="seconds"></label>

    <script type="text/javascript" src="javascript.js"></script>
</body>
</html>

【讨论】：

【解决方案3】：

因此，您想将其分解为两个不同的操作。首先，你有你的 convertMinutesToSeconds 函数。其次，你有你的点击操作。单击“转换”按钮时，您希望它使用输入（用户输入）的值运行 convertMinutesToSeconds 并使用该数字更新 DOM。

因此，以这种方式构建代码是一个问题。您现在拥有所有部件，只是没有正确组装。

// Convert function
function convert(m){
    return (m * 60);
}

// Click handler - runs convert function, appends result to DOM.
function handleClick() {
  const m = document.getElementById('input');
  const minutesValue = m.valueAsNumber;
  const seconds = convert(minutesValue);
  document.getElementById('seconds').innerHTML = seconds + ' seconds';
}

// Attach clickHandler to the button
const convertMinutes = document.getElementById('convertButton');
convertMinutes.addEventListener('click', handleClick);

 


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <label>Convert minutes into seconds!</label>
        <input type="number" id="input">
        <button id="convertButton">Convert</button>
        <br>
        <label id="seconds"></label>

        <script type="text/javascript" src="javascript.js"></script>
    </body>
    </html>

【讨论】：

【解决方案4】：

您在正确的轨道上 - 由于您已附加事件处理程序，因此无需显式调用 convert()（就像您在 js 的最后一行中所做的那样），只需将这部分代码移动到事件处理函数。详情见代码中的cmets：

// Create some references to our DOM elements
const convertMinutes = document.getElementById('convertButton');
const m = document.getElementById('input');
const s = document.getElementById('seconds');

// Attach the event listener
convertMinutes.addEventListener('click', convert);

// When a function is fired by addEventListener, it is passed an event parameter i.e.: e.
function convert(e) {
  // Simply check that the user didnt leave m text input blank before calculating
  if (m.value) {
    // Do the calculation and set the value of the DOM element's innerHTML
    s.innerHTML = `${(m.value * 60)} seconds`;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <label>Convert minutes into seconds!</label>
  <input type="number" id="input">
  <button id="convertButton">Convert</button>
  <br>
  <label id="seconds"></label>

  <script type="text/javascript" src="javascript.js"></script>
</body>

</html>

【讨论】：

【解决方案5】：

从m.value获取输入元素内的值。

document.getElementById('seconds').innerHTML = convert(m.value) + ' seconds';

【讨论】：