Javascript: возвращает NaN - PullRequest
Новая
       13

Javascript: возвращает NaN

1 голос
/ 21 февраля 2020

Поскольку я довольно новичок в программировании, я решил выполнить несколько 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>

Ответы [ 5 ]

1 голос
/ 22 февраля 2020

Вы на правильном пути - поскольку вы подключили обработчик событий, нет необходимости явно вызывать 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>
1 голос
/ 22 февраля 2020

Итак, вы хотите разбить это на две отдельные операции. Во-первых, у вас есть функция convertMinutesToSeconds. Во-вторых, у вас есть операция клика. При нажатии кнопки Convert вы хотите, чтобы он запускал 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>
1 голос
/ 22 февраля 2020

Вам необходимо прочитать значение элемента с помощью ввода 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>
1 голос
/ 22 февраля 2020

Попробуйте это 

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>
0 голосов
/ 22 февраля 2020

Получить значение внутри элемента ввода из m.value. 

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