堆栈内存溢出
  繁体   English   中英

Javascript“if”语句不起作用

[英]Javascript “if” statement does not work

 原文  2016-12-21 10:48:30  0   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