我有代碼（某種點擊游戲）應該在達到某個分數（在本例中為 10）后向您顯示下一個按鈕（影像），并且此按鈕（影像）為您提供比上一個等更多的分數。我的問題是我不能使我的第二個按鈕（影像）出現。
var score_count = 0
var pic1 = document.getElementsByClassName('btn1');
var pic2 = document.getElementsByClassName('btn2');
function addToScore(amount) {
score_count = score_count amount;
document.getElementById('score_count').innerHTML = score_count;
}
if (score_count >= 10) {
pic2.style.visibility = 'visible';
}.score {
font-size: 40px;
}
.btns:active {
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}
.btn2 {
visibility: hidden;
}<script src="script.js" type="text/javascript"></script>
<p class="score">Score: <span id="score_count">0</span></p>
<input id="pic1" class="btn btns" type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">
<input id="pic2" class="btn2 btns" type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">uj5u.com熱心網友回復：
發生這種情況是因為條件的評估僅在腳本首次加載時發生。解決它的一種方法是移動這個塊：
if (score_count >=10) {
pic2.style.visibility = 'visible';
}
在 addToScore 函式中，這樣每次分數更新時都會對其進行評估。
我相信您剛剛開始使用 JS，否則我會告訴您更好的解決方案是使用事件。在您的 addToScore 中，您可以在 score_count 大于或等于 10 時觸發一個事件，然后宣告事件偵聽器，通過這種方式學習它可以讓您更好地了解您可以使用 javascript 實作什么。
uj5u.com熱心網友回復：
if條件需要在函式內部&我假設你想隱藏之后的第一個按鈕。所以這就是我所做的&我改變了document.getElementsByClassName。document.getElementById因為document.getElementsByClassName你會得到一個arrayofobjects在這種情況下你已經通過了一個indexfor.eg
var pic1 = document.getElementsByClassName('pic1')[0];
var score_count = 0
var pic1 = document.getElementById('pic1');
var pic2 = document.getElementById('pic2');
function addToScore(amount) {
score_count = score_count amount;
document.getElementById('score_count').innerHTML = score_count;
if (score_count >=10) {
pic2.style.visibility = 'visible';
pic1.style.visibility = 'hidden';
}
}.score{
font-size: 40px;
}
.btns:active{
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}
.btn2{
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Score</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js" type="text/javascript"></script>
<p class="score">Score: <span id="score_count">0</span></p>
<input id="pic1" class="btn btns" type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">
<input id="pic2" class="btn2 btns" type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">
</body>
</html>uj5u.com熱心網友回復：
您的選擇器指示所有類，即btn2。
您必須使用getElementById方法或使用選擇第一個元素pic2[0]。
此外，您的 if 條件應該在addToScore函式內部。
var score_count = 0
var pic1 = document.getElementsByClassName('btn1');
var pic2 = document.getElementsByClassName('btn2');
function addToScore(amount) {
score_count = score_count amount;
document.getElementById('score_count').innerHTML = score_count;
if (score_count >=10) {
pic2[0].style.visibility = "visible";
}
}.score{
font-size: 40px;
}
.btns:active{
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}
.btn2 {
visibility: hidden;
}<p class="score">Score: <span id="score_count">0</span></p>
<input id="pic1" class="btns" type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">
<input id="pic2" class="btn2 btns" type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506278.html
標籤：javascript html css