CODEWITHSUNDEEP
javascriptnan
Appelpeer15
Appelpeer15

Reputation: 23

Javascript: returns NaN

Since I'm pretty new to programming I decided to do some Javascript exercises like this 'minutes to seconds' converter.
If I understand correctly 'm' isn't a number since it isn't declared anywhere. 'm' (the amount of minutes) is supposed to be the input of the user. However, if I give 'm' a value (e.g. const m = '0') the user won't be able to change the value of 'm'.

How can I get rid of the NaN error, (but still enable the user to insert a number)? Also, is this a good/correct way to take on this exercise?

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>

Upvotes: 1

Views: 602

Answers (5)

Christos
Christos

Reputation: 53958

You need to read the value of the element with id input and the parse it as an integer or a float (below we parse it as an integer). For further info, pls have an info parseInt. Pls check the following snippet:

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>

Upvotes: 1

Tom O.
Tom O.

Reputation: 5941

You're on the right track - since you've attached an event handler there's no need to call convert() explicitly (as you do in the last line of your js), just move that portion of the code inside the event handler function. See comments in code for details:

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

Upvotes: 1

LMulvey
LMulvey

Reputation: 1670

So, you want to break this into two distinct operations. First, you have your convertMinutesToSeconds function. Second, you have your click operation. When clicking the Convert button, you want it to run convertMinutesToSeconds using the value of the input (user-input) and update the DOM with that number.

So, it's a matter of structuring your code that way. You have all the pieces there right now, just not assembled properly.

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

Upvotes: 1

kirsanv43
kirsanv43

Reputation: 358

Try this

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>

Upvotes: 1

Hurried-Helpful
Hurried-Helpful

Reputation: 2000

Get the value inside the input element from m.value.

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

Upvotes: 0

Related Questions