2017-09-19 8 views
0

Get Value Mit Onclick

var change = document.getElementById('pounds'); 
 
var click = document.getElementById('convert'); 
 

 
click.addEventListener('click', test(e)); 
 

 
function test(e) { 
 
    change.addEventListener('input', function(e) { 
 
    let lbs = e.target.value; 
 
    document.getElementById('ounce').innerHTML = lbs * 16; 
 
    }); 
 
}
<input type="text" placeholder='convert' id='pounds'> 
 
<p>Your conversion: </p> 
 
<p id='ounce'></p> 
 
<button id="convert" onclick="test()">Convert Now</button>

ich JS recht neu bin und ich lerne durch einfache Sachen zu bauen. Ich versuche, einen Pfund-zu-Unzen-Konverter zu erstellen, und ich weiß, wie ich den Echtzeitwert während der Eingabe erhalte, aber ich möchte das Ergebnis erhalten, nachdem ich auf eine Schaltfläche geklickt habe. Mein Code funktioniert irgendwie .. Sie müssen auf die Schaltfläche klicken, bevor Sie eingeben, aber das ist nicht das, wonach ich suche. Ich möchte den Wert nur erhalten, indem ich auf die Schaltfläche klicke.

ich entschuldige mich, wenn dies eine einfache Frage, aber ich kann nicht scheinen, um herauszufinden, haha.

+0

Warum ist Ziel dort übrigens? – bigbounty

Antwort

3

Ich sehe ein paar Dinge passiert, dass ich wollte bringen. Zuerst werde ich unten eine überarbeitete Version des Codes anhängen und erklären, warum ich bestimmte Dinge so gemacht habe, wie ich es gemacht habe.

const conversionButton = document.getElementById('convert-button'); 
 
const conversionDisplay = document.getElementById('conversion-display'); 
 
const userInput = document.getElementById('pounds-input'); 
 

 
conversionButton.addEventListener('click', convertPoundsToOunces); 
 

 
function convertPoundsToOunces() { 
 
    let lbs = userInput.value; 
 
\t 
 
    conversionDisplay.innerHTML = lbs * 16; 
 
}
<input type="text" placeholder="convert" id="pounds-input"> 
 
<p>Your conversion: </p> 
 
<p id="conversion-display"></p> 
 
<button id="convert-button">Convert Now</button>

Das erste, was ich daran dachte, war, dass man innerhalb der addEventListener Methode der Testfunktion wird ausgeführt hatte.Sie möchten die Funktion dort statt verweisen, so würden Sie

click.addEventListener('click', test);

statt tun:

click.addEventListener('click', test());

oder in diesem Fall mit den neuen Variablennamen:

conversionButton.addEventListener('click', convertPoundsToOunces);

Auf diese Weise wird es zum Zeitpunkt der Schaltfläche CLI aufgerufen geklickt.

Ich bemerkte, dass Sie auch das onclick-Attribut verwendeten. Das muss auch nicht vorhanden sein. Wir möchten einfach einen Ereignis-Listener hinzufügen, so dass unsere Click-Handler-Funktion ausgeführt wird, wenn auf die Schaltfläche geklickt wird. Wir haben auch Zugriff auf den Wert der Eingabe, so dass e.target.value nicht benötigt wird. In diesem Fall wird userInput.value den Wert innerhalb der Texteingabe ziehen, wenn convertPoundsToOunces aufgerufen wird.

Einige letzte Gedanken und Vorschläge: Ändern Sie die Variablen nach oben zu Consts. Die Mischung aus einfachen und doppelten Anführungszeichen in den HTML-Attributen ist etwas seltsam. Ich bleibe in der Regel mit doppelten Anführungszeichen für HTML. Zu guter Letzt möchte ich meinen Variablen sehr semantische Namen geben. Annndndddd schließlich darüber nachdenken, wie wir uns davor schützen könnten, wenn ein Benutzer etwas außer einer Nummer eingibt. Hoffe das war hilfreich!

+0

Danke, dass du dir die Zeit genommen hast, dies zu erklären! – RogerFedFan

+0

@ GabrielPozo Kein Problem :) –

1

Ihr zweiter eventListener hört auf Wechselgeld zu. Entfernen Sie einfach es:

var change = document.getElementById('pounds'); 
 
var click = document.getElementById('convert'); 
 

 
click.addEventListener('click', test); 
 

 
function test(e) { 
 
    let lbs = change.value; 
 
    document.getElementById('ounce').innerHTML = lbs * 16; 
 
}
<input type="text" placeholder='convert' id='pounds'> 
 
<p>Your conversion: </p> 
 
<p id='ounce'></p> 
 
<button id="convert" onclick="test()">Convert Now</button>

1

Hier gibt es ein paar Fragen sind. Die wichtigste davon ist, dass Sie die test Funktion sofort eher sind die Ausführung als sie als Event-Handler-Einstellung:

click.addEventListener('click', test(e)); 

Statt die Funktion auszuführen, ist es nur Referenz:

click.addEventListener('click', test); 

Zusätzlich innerhalb der Funktion führen Sie die Berechnung nicht durch. Stattdessen setzen Sie den Änderungshandler nur auf die Texteingabe. (Das ist, warum Sie auf die Schaltfläche klicken, bevor der Text Aktualisierung beginnt.), Dass Handler entfernen, und rufen Sie nur die Logik direkt:

function test(e) { 
    let lbs = e.target.value; 
    document.getElementById('ounce').innerHTML = lbs * 16; 
} 

Schließlich wird in diesem Fall e wird nicht enthalten, was Sie erwarten. Aber zum Glück brauchen Sie es überhaupt nicht zu benutzen. Sie haben bereits einen Verweis auf das Element, das Sie in der change Variable benötigen:

function test() { 
    let lbs = change.value; 
    document.getElementById('ounce').innerHTML = lbs * 16; 
} 

Example