我只想在一個框中增加分數，但它會在 2 個地方增加。我的代碼：
var homescore = document.getElementById('home-score')
var guestscore = document.getElementById('guest-score')
var i = 0;
function add1() {
i ;
homescore.innerHTML = i
}
var i = 0
function add2() {
i = 2
homescore.innerHTML = i
}
var i = 0
function add3() {
i = 3
homescore.innerHTML = i
}
var i = 0;
function add1g() {
i ;
guestscore.innerHTML = i
}
var i = 0
function add2g() {
i = 2
guestscore.innerHTML = i
}
var i = 0
function add3g() {
i = 3
guestscore.innerHTML = i
}
HTML：
<!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" />
<title>BasketBall Score Board</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button id="add1" onclick="add1()"> 1</button>
<button id="add2" onclick="add2()"> 2</button>
<button id="add3" onclick="add3()"> 3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br />
<h1 class="guest-score" id="guest-score">0</h1>
<button id="add1" onclick="add1g()"> 1</button>
<button id="add2" onclick="add2g()"> 2</button>
<button id="add3" onclick="add3g()"> 3</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
例如，如果我單擊 1主頁中的按鈕并將其增加到 9。然后，我單擊 1來賓，它在來賓中顯示 10。我想要每個盒子有不同的值。如果我 1在 HOME 中單擊它應該遞增到 1，然后如果我在來賓中單擊 1 它應該遞增到 1 而不是 2。如果可能的話，請告訴我撰寫此代碼的更短的方法。謝謝
uj5u.com熱心網友回復：
幾件事：我建議避免使用var. 使用let或const代替。為什么？
再次宣告同一個變數會為該變數分配一個新值，洗掉它對之前參考的資料的參考（或關系）。
在 JS 中宣告變數
基元與參考資料型別
下面我重構了你的代碼。你可以試試看。
script.js 檔案：
const homescore = document.getElementById("home-score");
const guestscore = document.getElementById("guest-score");
let homescoreCount = 0;
function add(num) {
homescoreCount = num;
homescore.innerHTML = homescoreCount;
}
let guestscoreCount = 0;
function addG(num) {
guestscoreCount = num;
guestscore.innerHTML = guestscoreCount;
}
您還將更改在 HTML 中呼叫函式的方式：
<!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" />
<title>BasketBall Score Board</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button id="add1" onclick="add(1)"> 1</button>
<button id="add2" onclick="add(2)"> 2</button>
<button id="add3" onclick="add(3)"> 3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br />
<h1 class="guest-score" id="guest-score">0</h1>
<button id="add1" onclick="addG(1)"> 1</button>
<button id="add2" onclick="addG(2)"> 2</button>
<button id="add3" onclick="addG(3)"> 3</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
我希望這有幫助。不要害怕提問，更重要的是不斷學習。
uj5u.com熱心網友回復：
而不是使用
var i = 0;
function add1() {
i ;
homescore.innerHTML = i
}
嘗試使用，
var i = 0;
function add1() {
i = 1;
homescore.innerHTML = i
}
uj5u.com熱心網友回復：
如果有人對古怪的極簡主義解決方案感興趣，這里是：
document.querySelector(".container").onclick=ev=>{
let d=ev.target.closest(".right-side,.left-side")?.querySelector("h1[class$=score]")
if (d) {
d.textContent= d.textContent ( ev.target.textContent.slice(1))
} else if (ev.target.tagName=="BUTTON") // reset all
document.querySelectorAll("h1[class$=score]").forEach(h=>h.textContent="0");
}<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button> 1</button>
<button> 2</button>
<button> 3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br>
<h1 class="guest-score" id="guest-score">0</h1>
<button> 1</button>
<button> 2</button>
<button> 3</button>
</div><br>
<button>reset all scores</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497308.html
標籤：javascript html
上一篇：命令執行問題