Wie kann ich mir einem JavaScript Button einen Wert speichern?
Hi,
hab heute von der Schule aus mit JavaScript angefangen und ich hasse es ehrlich gesagt. Aber es ist meine Pflicht, wie gesagt, wegen Schule.
Ich muss Schere Stein Papier nachschreiben, und da mein Professor unsere Codes durch nen Plagiat Scanner laufen lässt, können wir sie auch nicht einfach kopieren.
Ich habe es so geplant, ich kreiere 3 Buttons, je nachdem auf welchen du clickst, wird ein Textfeld mit jeweiligem Wert ausgegeben (z.b. Player: rock)
Ich hab aber keinen Plan wie ich einen Wert von einem Button in eine Variable speichere, ich bin auch zu blöd Tutorials zu befolgen.
Kann mir bitte jemand sagen wie das geht?
Danke
3 Antworten
in dem du per klick eine Funktion mit dem button aufrufst welches den wert des Buttons übergibt
<button onclick='myFunction("Stein")'>Stein</button>
<script>
function myFunction(Element){
var meineWahl = Element
}
</script>
Beim Button klick wird in diesem Beispiel die Funktion "myFunction" aufgerufen und übergibt den Wert Stein.
Die Funktion wird ausgefüht und setzt die Variable meineWahl zu Stein
playerr(); ist nicht definiert
außerdem soltest du nicht document.write sondern innerHTML oder textContent nutzen.
buttons('stone');
buttons('paper');
buttons('scissors');
computer();
var random = Math.round(Math.random() * 3);
die funktion sind auch nicht korrekt und müssen nicht am anfang aufgerufen werden. Alle 3 funktionen heißen buttons. Den parameter in der funktion übergibt man damit man in der funktion damit arbeiten kann . Bedeutet du benötigst nur eine Funktion buttons.
function buttons('parameter'){
playerr = parameter;
}
Diese kannst du dann mit dem onclick ausführen. du kannst beim onclick auch funktionenen hintereinandersetzen.
onclick="buttons(stone);computer();results()"
ist das für die Schule??
Ich müsste alles umschreiben damit es funktioniert
Erst erzeugst du den Button mit einem Wert und einer einzigartigen ID:
<button id="my-button" value="some value">Click me</button>
In einem script-Block, den du nach dem Button einbindest, kannst du dir nun via DOM API den Button holen und ihm einen Event Listener anhängen:
// get button reference
const myButton = document.getElementById("my-button");
// attach click listener
myButton.addEventListener("click", function() {
// do something ...
});
Bei jeden Klick auf den Button wird dann die Funktion ausgeführt, die als zweites Argument an addEventListener übergeben wird.
Innerhalb der Funktion könntest du nun auf den Wert des Buttons zugreifen:
console.log(this.value);
Das Schlüsselwort this zeigt innerhalb der Funktion auf das Element, dem der Listener angehängt wurde. Also deinen Button.
Um den Wert in einem Textfeld auszugeben, brauchst du nun noch ein Textfeld:
<input id="my-textfield">
<!-- your button and script comes here .... -->
Das Textfeld bekommst du, so wie oben, über getElementById. Der Inhalt der Listener-Funktion für den Button könnte so aussehen (unter der Annahme, dass die Variable, die auf dein Textfeld zeigt, nun myTextField heißt):
myTextField.value = this.value;
Ich hab mal deine version versucht, aber es funzt nicht ganz. Ich gib dir mal den Code.
<!DOCTYPE html>
<html>
<head>
<title>rock paper scissors</title>
</head>
<body>
<div>
<script>
var player;
var computerr;
playerr();
buttons('stone');
buttons('paper');
buttons('scissors');
computer();
var random = Math.round(Math.random() * 3);
function buttons(stone) {
playerr = "stone";
}
function buttons(paper) {
playerr = "paper";
}
function buttons(scissors) {
playerr = "scissors";
}
function computer() {
if (random == 1) {
return computerr = 'rock';
document.write("<h2>Computer: " + computerr + "</h2>");
} else if (random == 2) {
return comupterr = 'paper';
document.write("<h2>Computer: " + computerr + "</h2>");
} else if (random == 3) {
return computerr = 'scissors';
document.write("<h2>Computer: " + computerr + "</h2>");
}
}
function results() {
if (player === computerr) {
return result = 'It`s a tie'
} else if (player === 'rock' && computerr === 'paper') {
document.write("You lost");
} else if (player === 'rock' && computerr === 'scissors') {
document.write("You won");
} else if (player === 'scissors' && computerr === 'rock') {
document.write("You lost");
} else if (player === 'scissors' && computerr === 'paper') {
document.write("You won");
} else if (player === 'paper' && computerr === 'scissors') {
document.write("You lost");
} else if (player === 'paper' && computerr === 'paper') {
document.write("You won");
}
}
</script>
<button class="button" id="rock" name="button1" value="rock" onclick='buttons("stone")'>Stone</button>
<button class="button" id="paper" name="button2" value="paper" onclick='buttons("paper")'>Paper</button>
<button class="button" id="scissors" name="button3" value="scissors"
onclick='buttons("scissors")'>Scissors</button>
</div>
</body>
</html>