2
ここで基本的なDOM操作を行う。すべてがうまくいっています：プレーヤーが5のようにあらかじめ定義された数字に達すると、今のところスコアは緑色に変わり、それ以上の増加は止まります。その後、「リセット」ボタンをクリックすると、「0から0」にリセットされますが、「プレーヤー」ボタンのいずれかをクリックすると、0から始まらず、以前の値が続きます。リセットボタンで値が0にリセットされない
/*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>
質問のすべての単語にひどい大文字とは何ですか？投稿を編集して修正してください。 – nnnnnn