Javascript: returns 南

Question

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

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

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>

Answer 1

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

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

Answer 2

您需要读取输入id的元素的值，并将其解析为整数或浮点数（下面我们将其解析为整数）。欲了解更多信息，请提供信息 parseInt。请检查以下代码段：

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>

Answer 3

试试这个

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>

Answer 4

因此，您想将其分成两个不同的操作。首先，您有 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>

Answer 5

你走在正确的轨道上 - 因为你已经附加了一个事件处理程序，所以不需要显式调用 convert()（就像你在 js 的最后一行中所做的那样），只需移动那部分事件处理函数中的代码。详情见代码注释：

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

Javascript: returns 南

Javascript: returns NaN

javascript

nan