堆棧內存溢出
  簡體   English   中英

Javascript“if”語句不起作用

[英]Javascript “if” statement does not work

 原文  2016-12-21 10:48:30  5   7    javascript

問題描述

我是Javascript編程的新手。 我一直試圖修復這個“if”聲明一小時。 我沒有看到任何問題。 請看看，告訴我有什么問題！ 

  <!DOCTYPE HTML> <HTML> <body> <head> <style> button { font-size:14px } button.hide { display:none } </style> <title>Candy Box REMAKE</title> <script type="text/javascript"> var candies = 0; function addCandies() { candies ++; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function add10Candies() { candies += 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function throwCandies() { candies -= 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; if (candies >= 30) { document.getElementById('add10Candies').style.display = "block"; }; </script> <p id="numberOfCandies">You got 0 candy</p> <button onclick="addCandies()">Get a candy.</button> <button onclick="throwCandies()">Throw 10 candies away. <button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button> </body> </HTML>

這部分： 

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

當我得到足夠的糖果時，它不起作用（顯示隱藏的按鈕）。

7 個解決方案

解決方案1
 4  2016-12-21 10:50:31

將if statement放在每個函數中。 當頁面加載時，它只運行一次。

解決方案2
 2  2016-12-21 10:52:22

問題是， if檢查在加載頁面時僅運行一次。 一種可能的解決方案是創建一個在所有其他函數中調用的checkCandies()函數： 

var candies = 0;
function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};
function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};
function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};

function checkCandies() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    };
}

解決方案3
 1 已采納  2016-12-21 10:52:35

將您的代碼放在一個函數中： 

function checkCandiesQuantity() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    } else {
        document.getElementById('add10Candies').style.display = "none";
    }
}

更新數量時調用它： 

function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

解決方案4
 1  2016-12-21 11:04:39

我添加了checkIs30Candies（）函數。 也改變了樣式到style.display =“inline-block”（在你的情況下，它必須是內聯塊，我想）

你有一個錯字 

 <button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button>

它應該是onclick =“add10Candies（）”，帶有大括號來調用一個函數 

 <!DOCTYPE HTML> <HTML> <body> <head> <style> button { font-size:14px } button.hide { display:none } </style> <title>Candy Box REMAKE</title> <script type="text/javascript"> var candies = 0; function checkIs30Candies() { if (candies >= 30) { document.getElementById('add10Candies').style.display = "inline-block"; } else { document.getElementById('add10Candies').style.display = "none"; } } function addCandies() { candies ++; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; checkIs30Candies(); }; function add10Candies() { candies += 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function throwCandies() { candies -= 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; checkIs30Candies(); }; </script> <p id="numberOfCandies">You got 0 candy</p> <button onclick="addCandies()">Get a candy.</button> <button onclick="throwCandies()">Throw 10 candies away. <button class="hide" id="add10Candies" onclick="add10Candies()">Get 10 candies.</button> </body> </HTML>

解決方案5
 0  2016-12-21 10:52:33

您應該將if語句放在其他更改糖果數量的函數中。 

function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function checkCandies() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    }
}

解決方案6
 0  2016-12-21 10:57:35

您需要添加此代碼 

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

在您定義的每個功能中。

現在發生了什么：

第1步 ： 

var candies = 0;

第2步 ： 

<declarations of functions>

第3步： 

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

因此，在初始化和函數聲明之后，控件直接傳遞給你的if條件，因為candies = 0沒有任何反應。

當您調用這些函數中的任何一個時，函數會執行，但由於if條件在函數之外，因此不會執行。

解決方案7
 0  2016-12-21 10:59:41

或許寫一個更簡單的方法是（也有更多'更簡單'的水平）。 盡可能重用常見的代碼。

PS：我修復了我認為是消息中的語法錯誤： 

<script type="text/javascript">
var candies = 0;
function updateCandies() {
    var e = document.getElementById('numberOfCandies');
    e.innerHTML = "You [edit:] have " + candies + " candies.";
    e.style.display = candies>=30 ? "block" : "none";
}

function addCandies() {
    candies ++;
    updateCandies();
};
function add10Candies() {
    candies += 10;
    updateCandies();
};
function throwCandies() {
    candies -= 10;
    updateCandies();
};
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript if語句不起作用 如果 with 或語句不起作用 - javascript Javascript switch 語句不起作用 為什么此JavaScript if語句不起作用？ 使用 if 語句重定向用戶的 HTML Javascript 不起作用 JavaScript：在if語句中工作的for循環在三元語句中工作不？ 為什么？ 在JavaScript中，forEach回調如何在后台運行？ 有收益聲明嗎？ 使用javascript生成CKEDITOR不適用於for循環語句 Javascript：創建一個對象而不是返回語句？ 這是如何運作的？ 為什么這個基本的if語句不起作用？ JavaScript的
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM