Da ich mit dem Programmieren noch ziemlich neu bin, habe ich mich entschlossen, einige Javascript-Übungen wie diesen Konverter von Minuten zu Sekunden durchzuführen.
Wenn ich richtig verstehe, ist 'm' keine Zahl, da es nirgendwo deklariert ist. 'm' (die Anzahl der Minuten) soll die Eingabe des Benutzers sein. Wenn ich jedoch 'm' einen Wert gebe (z. B. const m = '0'), kann der Benutzer den Wert von 'm' nicht ändern.

Wie kann ich den NaN-Fehler beseitigen (aber dem Benutzer trotzdem das Eingeben einer Nummer ermöglichen)? Ist dies auch ein guter / korrekter Weg, um diese Übung durchzuführen?

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>
1
Appelpeer15 21 Feb. 2020 im 23:57

5 Antworten

Beste Antwort

Sie müssen den Wert des Elements mit der Eingabe id lesen und es als Ganzzahl oder Gleitkomma analysieren (unten wird es als Ganzzahl analysiert). Für weitere Informationen haben pls eine Info parseInt . Bitte überprüfen Sie das folgende 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>
1
Christos 23 Feb. 2020 im 10:03

Sie möchten dies also in zwei verschiedene Operationen aufteilen. Zunächst haben Sie Ihre Funktion convertMinutesToSeconds. Zweitens haben Sie Ihre Klickoperation. Wenn Sie auf die Schaltfläche Konvertieren klicken, soll convertMinutesToSeconds mit dem Wert der Eingabe (Benutzereingabe) ausgeführt und das DOM mit dieser Nummer aktualisiert werden.

Es geht also darum, Ihren Code so zu strukturieren. Sie haben jetzt alle Teile dort, nur nicht richtig zusammengebaut.

// 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
LMulvey 21 Feb. 2020 im 21:06

Sie sind auf dem richtigen Weg - da Sie einen Ereignishandler angehängt haben, müssen Sie convert() nicht explizit aufrufen (wie in der letzten Zeile Ihres js). Verschieben Sie einfach diesen Teil des Codes innerhalb des Ereignisses Handlerfunktion. Siehe Kommentare im Code für 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>
1
Tom O. 21 Feb. 2020 im 21:09

Versuche dies

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>
1
kirsanv43 21 Feb. 2020 im 21:04

Ruft den Wert innerhalb des Eingabeelements von m.value ab.

document.getElementById('seconds').innerHTML = convert(m.value) + ' seconds';
0
Hurried-Helpful 21 Feb. 2020 im 21:02