1
votes

Javascript: renvoie NaN

Comme je suis assez novice en programmation, j'ai décidé de faire des exercices Javascript comme ce convertisseur de «minutes en secondes».
Si je comprends bien, «m» n'est pas un nombre puisqu'il n'est déclaré nulle part. «m» (le nombre de minutes) est censé être l'entrée de l'utilisateur. Cependant, si je donne une valeur à 'm' (par exemple, const m = '0'), l'utilisateur ne pourra pas changer la valeur de 'm'.

Comment puis-je me débarrasser de l'erreur NaN (tout en permettant à l'utilisateur d'insérer un numéro)? De plus, est-ce une bonne / correcte façon de réaliser cet exercice?

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

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

javascript nan

5 commentaires

vous ne transmettez rien non plus à convert () .

Votre écouteur d'événement (gestionnaire de clics) appelle votre fonction mais rien n'est fait avec la valeur de retour

Souhaitez-vous simplement avoir une valeur par défaut qui n'est pas NaN?

Aussi, pourquoi toutes les réponses ici sont-elles rejetées?

@Jacob quelqu'un veut punir tous les répondants pour avoir répondu à une question qui, selon eux, devrait être fermée.

5 Réponses :

0
votes

Récupère la valeur à l'intérieur de l'élément d'entrée à partir de m.value.

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

0 commentaires

1
votes

Vous devez lire la valeur de l'élément avec l'entrée id et l'analyser comme un entier ou un flottant (ci-dessous, nous l'analysons comme un entier). Pour plus d'informations, veuillez avoir une info parseInt a >. Veuillez vérifier l'extrait suivant:

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

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';
}

4 commentaires

Merci pour votre solution simple et votre excellente explication! Apparemment, je n'ai même pas besoin d'utiliser le retour ici.

@ Appelpeer15 Vous êtes les bienvenus! Je suis content d'avoir aidé!

@downvoter .... ce serait utile, si vous aviez laissé un commentaire qui expliquerait la raison pour laquelle vous avez voté contre. Le simple fait de voter sans laisser de commentaire n'aide personne.

@Christos à peu près sûr que c'était juste un troll. A voté contre chaque réponse sans commentaire.

1
votes

Essayez ceci

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

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`;
}

0 commentaires

1
votes

Donc, vous voulez diviser cela en deux opérations distinctes. Tout d'abord, vous avez votre fonction convertMinutesToSeconds. Deuxièmement, vous avez votre opération de clic. Lorsque vous cliquez sur le bouton Convertir, vous voulez qu'il exécute convertMinutesToSeconds en utilisant la valeur de l'entrée (entrée utilisateur) et met à jour le DOM avec ce nombre.

Il s'agit donc de structurer votre code de cette façon. Vous avez toutes les pièces là pour le moment, mais pas assemblées correctement.

 


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

0 commentaires

1
votes

Vous êtes sur la bonne voie - puisque vous avez attaché un gestionnaire d'événements, il n'est pas nécessaire d'appeler explicitement convert () (comme vous le faites dans la dernière ligne de votre js), déplacez simplement cette partie du code à l'intérieur de la fonction de gestionnaire d'événements. Voir les commentaires dans le code pour plus de détails:

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

// 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`;
  }
}

0 commentaires