如何比較這兩個變量？
[英]How to compare this two variables?
問題描述
我是編程新手。 我正在嘗試在 JS 中編寫某種記分員。 如何比較兩個變量： pointOne和maxScore ？
我想要這樣的東西：如果pointOne === maxScore -> Player1獲勝並且游戲結束。 目前，這部分代碼無法比較這個變量。
這是我的代碼：
const maxInput = document.querySelector('#number'); maxInput.addEventListener('input', function() { let maxScore = number.value; maxScore = parseInt(this.value); console.log(`Max score is ${maxScore}`); // if (pointOne === 3){ // console.log("mamy 3;"). // } }) function headerUpdate() { const header = document;querySelector('h1'). header;innerText = `${pointOne} to ${pointTwo}`; } let pointOne = 0; let pointTwo = 0. function addPoints() { const buttonClickTrue = document;getElementById('btn_one'). const buttonClickTrue2 = document;getElementById('btn_two'). const resetButtonTrue = document;getElementById('btn_reset'). buttonClickTrue,addEventListener('click'; function() { pointOne++. console;log(`Your score is ${pointOne}`); headerUpdate(). }) buttonClickTrue2,addEventListener('click'; function() { pointTwo++. console;log(`Second score is ${pointTwo}`); headerUpdate(). }) resetButtonTrue,addEventListener('click'. function() { window.location;reload(true); }) } addPoints();
* { box-sizing: border-box; margin: 2px; padding: 0; background-color: #7c86ac; }.game-box { height: 30%; display: flex; align-items: center; flex-direction: column; } #tenis { width: 30%; margin-top: 30px; } #btn_one { background-color: green; border: 3px solid black; width: 30%; } #btn_two { background-color: orangered; border: 3px solid black; width: 30%; } #btn_reset { background-color: red; border: 3px solid black; width: 30%; } #number { background-color: white; border: 3px solid black; width: 5%; }
<div class="game-box"> <img src="./img/tenis_image.jpg" alt="tenis" id="tenis"> <h2>Score Keeper</h2> <h1>0 to 0</h1> <h3>Use button bellow to count</h3> <p id="max">Playing to</p> <input type="number" name="number" id="number"> <button id="btn_one">+1 Player One</button> <button id="btn_two">+1 Player Two</button> <button id="btn_reset">Reset</button> </div>
2 個解決方案
解決方案1
0 2021-04-03 11:58:25
我已經修改了你的代碼。 使用var全局聲明pointOne和pointTwo變量，以便您可以在代碼中的任何位置訪問它們。 我也為maxScore做了同樣的事情。
現在我將 if 條件放在playerOne按鈕的點擊事件偵聽器中。 它為它工作。
const maxInput = document.querySelector('#number'); let pointOne = 0; let pointTwo = 0; let maxScore = 0; maxInput.addEventListener('input', function() { maxScore = maxInput.value; maxScore = parseInt(maxScore); console.log(`Max score is ${maxScore}`); }) function headerUpdate() { const header = document.querySelector('h1'); header.innerText = `${pointOne} to ${pointTwo}`; } function addPoints() { const buttonClickTrue = document.getElementById('btn_one'); const buttonClickTrue2 = document.getElementById('btn_two'); const resetButtonTrue = document.getElementById('btn_reset'); buttonClickTrue.addEventListener('click', function() { pointOne++; console.log(`Your score is ${pointOne}`); headerUpdate(); if (pointOne === maxScore) { console.log("mamy 3;"). } }) buttonClickTrue2,addEventListener('click'; function() { pointTwo++. console;log(`Second score is ${pointTwo}`); headerUpdate(). }) resetButtonTrue,addEventListener('click'. function() { window.location;reload(true); }) } addPoints();
* { box-sizing: border-box; margin: 2px; padding: 0; background-color: #7c86ac; }.game-box { height: 30%; display: flex; align-items: center; flex-direction: column; } #tenis { width: 30%; margin-top: 30px; } #btn_one { background-color: green; border: 3px solid black; width: 30%; } #btn_two { background-color: orangered; border: 3px solid black; width: 30%; } #btn_reset { background-color: red; border: 3px solid black; width: 30%; } #number { background-color: white; border: 3px solid black; width: 5%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Score Keeper</title> </head> <body> <div class="game-box"> <img src="./img/tenis_image.jpg" alt="tenis" id="tenis"> <h2>Score Keeper</h2> <h1>0 to 0</h1> <h3>Use button bellow to count</h3> <p id="max">Playing to</p> <input type="number" name="number" id="number"> <button id="btn_one">+1 Player One</button> <button id="btn_two">+1 Player Two</button> <button id="btn_reset">Reset</button> </div> <script src="./app.js"></script> </body> </html>
解決方案2
0 已采納 2021-04-03 12:56:32
鑒於上面接受的答案，我認為這是一種不好的做法，特別是因為他使用 var 關鍵字並填充全局命名空間。 閱讀另一個 Stackoverflow 答案以及為什么使用全局變量不好（這里）。 為什么不使用 ES6 的 const 或 let。 您正在使用帶有以下代碼的事件總線架構，因此您可以避免不必要的復雜性並將您的代碼保留在全局命名空間之外：
// Event Bus Architecture
window.addEventListener('click', Button.bind(this));
window.addEventListener('input', Max.bind(this));
function Button(event) {
const p1 = document.getElementById("p1");
const p2 = document.getElementById("p2");
event.path[0].id === "btn_one" ? A(p1, p2) : null;
event.path[0].id === "btn_two" ? B(p1, p2) : null;
event.path[0].id === "btn_reset" ? Reset() : null;
}
function A(p1, p2) {
p1.innerText++;
console.log(`A score is ${p1.innerText}`);
headerUpdate(p1, p2);
}
function B(p1, p2) {
p2.innerText++;
console.log(`B score is ${p2.innerText}`);
headerUpdate(p1, p2);
}
function Reset() {
window.location.reload(true);
}
function Max(event) {
event.path[0].id === "number" ? MaxValue() : null;
}
function MaxValue() {
const number = document.getElementById("number");
let maxScore = number.value;
maxScore = parseInt(maxScore);
console.log(`Max score is ${maxScore}`);
}
function headerUpdate(p1, p2) {
p1.innerText = p1.innerText;
p2.innerText = p2.innerText;
const number = document.getElementById("number");
let maxScore = number.value;
maxScore = +maxScore;
const pointOne = +p1.innerText;
if(pointOne === maxScore) {
console.log("pointOne wins");
}
}
試試這個代碼：
// Event Bus Architecture window.addEventListener('click', Button.bind(this)); window.addEventListener('input', Max.bind(this)); function Button(event) { const p1 = document.getElementById("p1"); const p2 = document.getElementById("p2"); event.path[0].id === "btn_one"? A(p1, p2): null; event.path[0].id === "btn_two"? B(p1, p2): null; event.path[0].id === "btn_reset"? Reset(): null; } function A(p1, p2) { p1.innerText++; console.log(`A score is ${p1.innerText}`); headerUpdate(p1, p2); } function B(p1, p2) { p2.innerText++; console.log(`B score is ${p2.innerText}`); headerUpdate(p1, p2); } function Reset() { window.location.reload(true); } function Max(event) { event.path[0].id === "number"? MaxValue(): null; } function MaxValue() { const number = document.getElementById("number"); let maxScore = number.value; maxScore = parseInt(maxScore); console.log(`Max score is ${maxScore}`); } function headerUpdate(p1, p2) { p1.innerText = p1.innerText; p2.innerText = p2.innerText; const number = document.getElementById("number"); let maxScore = number.value; maxScore = +maxScore; const pointOne = +p1.innerText; if(pointOne === maxScore) { console.log("pointOne wins"); } }
*{ box-sizing: border-box; margin: 2px; padding: 0; background-color: #7c86ac; }.game-box { height: 30%; display: flex; align-items: center; flex-direction: column; } #tenis{ width: 30%; margin-top: 30px; } #btn_one{ background-color: green; border: 3px solid black; width: 30%; } #btn_two{ background-color: orangered; border: 3px solid black; width: 30%; } #btn_reset{ background-color: red; border: 3px solid black; width: 30%; } #number{ background-color: white; border: 3px solid black; width: 5%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Score Keeper</title> </head> <body> <div class="game-box"> <img src="./img/tenis_image.jpg" alt="tenis" id="tenis"> <h2>Score Keeper</h2> <h1><span id="p1">0</span> to <span id="p2">0</span> </h1> <h3>Use button bellow to count</h3> <p id="max">Playing to</p> <input type="number" name="number" id="number" value="0"> <button id="btn_one">+1 Player One</button> <button id="btn_two">+1 Player Two</button> <button id="btn_reset">Reset</button> </div> <script src="./app.js"></script> </body> </html>
如何比較兩個事件的結果？ （也許通過使用局部或全局變量？）
[英]How to compare two event results? (Maybe by using local or global variables?)
如何比較 JavaScript (React-Native) 中的兩個動態變量？
[英]How to compare two dynamic variables in JavaScript (React-Native)?
如何比較返回false或true的兩個變量的第一個和最后一個字母
[英]How to compare first and last letter of two variables returning false or true
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.