JavaScript Rechner mit HTML-Formularen

-3

Ich möchte einen Rechner erstellen, der mit JavaScript eine Zahl aus einem HTML-Eingabefeld wie diesem nimmt.JavaScript Rechner mit HTML-Formularen

// Take form input and multiply by four

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input placeholder="Side Length of Square"/> 
 
    </body> 
 
</html>

Wie könnte ich dann die Benutzereingabe Relais, sagen 5, so dass der JavaScript würde „5“ nehmen und multiplizieren sie die Fläche des Platzes zu finden? Dies ist meine erste Frage zu Stack Overflow. Ich entschuldige mich, wenn ich etwas falsch gemacht habe. Danke für die Hilfe!

Quelle

2017-04-17 J. Smith

Wir hören nicht, Ihre Hausaufgaben zu machen. Was hast du versucht? – epascarello

@J. Smith, Sie sollten StackOverflow als letzten Ausweg betrachten. Schreiben Sie nur hier, wenn alle anderen Mittel zur Lösungsfindung ausgeschöpft sind. Um dieses Problem zu lösen, googeln Sie Dinge wie "wie HTML-Eingabewert an Javascript übergeben wird". Wahrscheinlich gibt es bereits eine Frage zu SO zu diesem Thema, die auch Ihre Frage beantworten wird. Bitte lies dieses hilfreiche Howto für das Stellen von Fragen hier: https://stackoverflow.com/help/how-to-ask – Ethilium

@Ethilium, tut mir leid für meine Ignoranz, aber dies ist meine allererste Stack Overflow Frage. Beim nächsten Mal werde ich noch anstrengender sein, um andere Online-Ressourcen zu finden. –

Sie würden JavaScript onkeyup verwenden, um die Fläche eines Quadrats zu berechnen, wenn der Benutzer Zahlen eingibt. Schau dir den Code unten an!

function calc(){ 
 
var val=document.getElementById("myInput").value; 
 
document.getElementById("area").innerHTML=Math.pow(val, 2); 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input id="myInput" placeholder="Side Length of Square"onkeyup="calc()"/> 
 
    <p>Area : <span id="area"></span></p> 
 
    </body> 
 
</html>

Quelle

2017-04-17 18:13:29 lhavCoder

Ich würde "onkeyup" durch "oninput" ersetzen, so berechnet es die Antwort sofort und funktioniert auch auf dem Touchscreen. – Napuu

Ja, es ist genau das, wonach ich gesucht habe. Anders als ein bisschen unreinen Code, der wirklich nur ein Thema ist, weil ich lächerliche OCD habe;), ist es perfekt! –

Bitte fügen Sie eine Erklärung hinzu, warum/wie dieser Code dem OP hilft. Dies wird helfen, eine Antwort zu liefern, von der zukünftige Zuschauer lernen können. Weitere Informationen finden Sie unter [diese Meta-Frage und ihre Antworten] (http://meta.stackoverflow.com/q/256359/215552). –

Zuerst müssen Sie entscheiden, wo Sie Ihre Ausgabe platzieren möchten, z.B. Einführung eines neuen Elements <div>, dessen Textinhalt die berechnete Seitenlänge enthält.

Außerdem sollten Sie Ihrem <input> sowie Ihrer Ausgabe <div> ein eindeutiges id-Attribut geben, damit Sie es später in Ihrem JavaScript-Code identifizieren können.

Dann würden Sie eine neue <script> vor dem schließenden </body> Tag einführen. Dies garantiert, dass zum Zeitpunkt der Skriptausführung alle relevanten HTML-Elemente bereits geladen und dem Document Object Model (DOM) hinzugefügt wurden, damit Ihr Skript darauf zugreifen kann.

Schließlich schreiben Sie eine JavaScript "Eingabe" Event-Handler und hängen Sie es an die <input> Element.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input type="number" id="side-length" placeholder="Side Length of Square"> 
 
    <div id="area"></div> 
 
    <script> 
 
     let input = document.getElementById("side-length"); 
 
     let output = document.getElementById("area"); 
 
     input.addEventListener("input", function(event) { 
 
     let sideLength = input.valueAsNumber; 
 
     output.textContent = sideLength * sideLength; 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

Hinweis: Über Ereignishandler berechnet die Bereich des Platzes mit bestimmten Seitenlänge, wie pro Ihre Frage und über den Code-Schnipsel auf den Kommentar gegenüber.

Quelle

2017-04-17 18:29:23

JavaScript Rechner mit HTML-Formularen

Antwort

Verwandte Themen