2016-07-10 13 views
0

Ich versuche, eine JavaScript zu erstellen, um die Nummer in meinem Eingabefeld zu ändern.Javascript, div auf klicken mehrere Zahlen im Eingabefeld

Beispiel:

<input value="0"> 

Und dann eine einfache Taste oder div mit einer JavasSript Klick-Funktion.

<button>Add +10</button> 

Nach Klick auf den Button:

<input value="10"> 

Hat ich lesen kann jemand einen Platz haben und lernen, diese zu erstellen, oder irgendwelche Tipps mir, um loszulegen. Ich weiß sehr wenig JavaScript, aber ich möchte lernen.

+4

SO nicht der richtige Ort für solche Fragen ist, aber einen Blick auf [MDN EventTarget.addEventListener()] nehmen (https://developer.mozilla.org/de-DE/docs/Web/API/EventTarget/addEventListener) und [addEventListener vs onclick] (http://stackoverflow.com/questions/6348494) –

+0

Möchten Sie eine Lösung für Ihre Frage oder Tipps zum Finden guter Tutorials/Kurse zum Lernen JS? –

+0

Ich möchte die Lösung, ich hoffe nur zu verstehen, wie es auch funktioniert. – Codey93

Antwort

1

können Sie this versuchen

<input value="0" id="id"> 

auf die Schaltfläche klicken Sie rufen eine Funktion

<button onclick="myFunction()">Add +10</button> 

<script> 
    function myFunction() { 
     document.getElementById("id").value = parseInt(document.getElementById("id").value) +10; 
    } 

</script> 
+0

Hallo, danke für die schnelle Antwort. Dies scheint die halbe Arbeit zu machen, ist es möglich, weitere 10 hinzuzufügen, wenn Sie erneut darauf klicken. Also es trifft 20, 30 und so weiter? – Codey93

+0

@ Codey93 aktualisiert versuchen Sie es jetzt – shivam

2

Versuchen Sie, diese oder fiddleLink eine ID-Eingabefeld geben.

ParseInt hilft beim Umwandeln des Zeichenfolgenwerts in Zahlen und fügt sie statt Verketten hinzu. Lassen Sie es mich wissen, wenn Sie immer noch Probleme haben.

var tag1Elem = document.getElementById("tag1"); 
 
// The callback function to increse the value. 
 
function clickFN() { 
 
    tag1Elem.value = parseInt(tag1Elem.value, 10) + 10; 
 
    } 
 
    // Reset the value back to 0 
 

 
function resetFN() { 
 
    tag1Elem.value = 0; 
 
    } 
 
    // Callbacks can be attached dynamically using addEventListener 
 
document.getElementById("btn").addEventListener("click", clickFN); 
 

 
document.getElementById("reset").addEventListener("click", resetFN);
#wrapper { 
 
    margin: 20px; 
 
}
<p>This is a basic tag input: 
 
    <input id="tag1" value="0" /> 
 
    <button type="button" id="btn">Add +10</button> 
 
    <button type="button" id="reset">Reset</button> 
 
</p>

0

können Sie einen Klick-Zähler wie this

verwenden und bearbeiten += 1 mit += 10 ersetzen. Hier mein Code,

var input = document.getElementById("valor"), 
 
    button = document.getElementById("buttonvalue"); 
 
    var clicks = 0; 
 

 
button.addEventListener("click", function() 
 
         { 
 
      clicks += 10; 
 
     input.value = clicks; 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Script</title> 
 
</head> 
 
<body> 
 
<input id="valor" value="0"> 
 
<button id="buttonvalue">10</button> 
 
</body> 
 
</html>

Verwandte Themen