Reset-Taste, die den Wert nicht auf 0 zurücksetzt

Eine grundlegende DOM-Manipulation hier vornehmen. Alles funktioniert gut: Wenn ein Spieler eine vordefinierte Zahl wie 5 erreicht, wird der Spielstand vorerst grün und stoppt weiter. Wenn ich dann auf die Schaltfläche "Zurücksetzen" klicke, wird sie auf "0 bis 0" zurückgesetzt, aber wenn ich auf eine der "Player" -Schaltflächen klicke, wird der vorherige Wert fortgesetzt, anstatt von 0 zu beginnen. Reset-Taste, die den Wert nicht auf 0 zurücksetzt

/*global prompt,alert,console*/ 
 
/*jslint plusplus: true */ 
 
var button1 = document.querySelector(".button1"); 
 
var button2 = document.querySelector(".button2"); 
 
var p1Display = document.querySelector(".p1display"); 
 
var p2Display = document.querySelector(".p2display"); 
 
var reset = document.querySelector(".reset"); 
 
var val1 = 0; 
 
var val2 = 0; 
 
var maxVal = 5; 
 
var gameOver = false; 
 
button1.addEventListener('click', function() { 
 
    'use strict'; 
 
    if (gameOver === false) { 
 
     val1++; 
 
     if (val1 === maxVal) { 
 
      p1Display.classList.add("win"); 
 
      gameOver = true; 
 
     } 
 
     p1Display.textContent = val1; 
 
    } 
 
}); 
 
button2.addEventListener('click', function() { 
 
    'use strict'; 
 
    if (gameOver === false) { 
 
     val2++; 
 
     if (val2 === maxVal) { 
 
      p2Display.classList.add("win"); 
 
      gameOver = true; 
 
     } 
 
     p2Display.textContent = val2; 
 
    } 
 
}); 
 
reset.addEventListener('click', function() { 
 
    'use strict'; 
 
    var val1 = 0; 
 
    var val2 = 0; 
 
    p1Display.textContent = 0; 
 
    p2Display.textContent = 0; 
 
    p1Display.classList.remove("win"); 
 
    p2Display.classList.remove("win"); 
 
    gameOver = false; 
 
});

.win{ 
 
    color: green; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Score Keeper</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <h1><span class="p1display">0</span> to <span class="p2display">0</span></h1> 
 
    <h3>Playing To : <span class="maxval">5</span></h3> 
 
    <input type="number" class="setVal" min="1"> 
 
    <button class="button1">Player One</button> 
 
    <button class="button2">Player Two</button> 
 
    <button class="reset">Reset</button> 
 
    <script src="script.js"></script> 
 
</body> 
 
</html>

JS Fiddle Working Link

Quelle

2016-07-02 user5323957

Was ist mit der schrecklichen Großschreibung auf jedes Wort in der Frage? Bitte [bearbeiten] Sie Ihren Beitrag und beheben Sie ihn. – nnnnnn

Sie var nicht verwenden, wenn das Zurücksetzen: in der Rücksetzfunktion, ersetzen

var val1 = 0; 
var val2 = 0;

von

val1 = 0; 
val2 = 0;

val1 und val2 sind bereits in einem äußeren Umfang erklärt, sie in einem engeren Rahmen erneut deklariert schafft nur verschiedene Variablen mit dem gleichen Namen („Shadowing“): die beiden Variablen val1 und val2 innerhalb der Rückstell Funktion sind nicht die gleichen wie die außerhalb der Funktion. Tatsächlich werden sie niemals verwendet, weshalb JSLint eine erneute Deklaration meldet und JSHint sagt, dass es sich um nicht verwendete Variablen handelt.

Quelle

2016-07-02 08:28:19 Xufox

danke, dass gearbeitet – user5323957

ja ich war im Begriff, aber es wird mich nicht markieren, wie zu dieser Zeit ist es weniger als 1 Minute – user5323957

Reset-Taste, die den Wert nicht auf 0 zurücksetzt

Antwort

Verwandte Themen