堆栈内存溢出
  简体   繁体   English

Javascript“if”语句不起作用

[英]Javascript “if” statement does not work

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

问题描述

I'm new to programming with Javascript. 我是Javascript编程的新手。 I've been trying fixing this "if" statement for hour. 我一直试图修复这个“if”声明一小时。 I don't see any proplem with it. 我没有看到任何问题。 Please have a look and tell me what's wrong! 请看看，告诉我有什么问题！ 

  <!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>

So this part: 这部分： 

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

doesn't work (show the hidden button) when i get enough candies. 当我得到足够的糖果时，它不起作用（显示隐藏的按钮）。

7 个解决方案

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

put your if statement in each function. 将if statement放在每个函数中。 At the moment it only runs once, when the page loads. 当页面加载时，它只运行一次。

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

The issue is that this if check runs only once when you load the page. 问题是， if检查在加载页面时仅运行一次。 A possible solution would be to create a checkCandies() function that is called within all the other functions: 一种可能的解决方案是创建一个在所有其他函数中调用的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

Put your code in a function: 将您的代码放在一个函数中： 

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

Call it when you update the quantity: 更新数量时调用它： 

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

I've add checkIs30Candies() function. 我添加了checkIs30Candies（）函数。 Also have changed style to style.display = "inline-block" (in you case it have to be inline-block, I suppose) 也改变了样式到style.display =“inline-block”（在你的情况下，它必须是内联块，我想）

And you had a typo 你有一个错字 

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

It should be onclick="add10Candies()", with braces to invoke a function 它应该是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

You should put the if statement in other functions that change candies amount. 您应该将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

You need to add this code 您需要添加此代码 

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

in each of the functions you have defined. 在您定义的每个功能中。

What is happening right now : 现在发生了什么：

Step 1 : 第1步 ： 

var candies = 0;

Step 2 : 第2步 ： 

<declarations of functions>

Step 3 : 第3步： 

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

So after initialization and function declarations, the control directly passes to your if condition and since candies = 0 nothing happens. 因此，在初始化和函数声明之后，控件直接传递给你的if条件，因为candies = 0没有任何反应。

When you call any of these functions, the function executes but since the if condition is outside the function, it is not executed. 当您调用这些函数中的任何一个时，函数会执行，但由于if条件在函数之外，因此不会执行。

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

Perhaps one simpler way to write this is (there are also increasing levels of 'simpler' as well). 或许写一个更简单的方法是（也有更多'更简单'的水平）。 Reuse the common bits of code when you can. 尽可能重用常见的代码。

PS: I fixed what I assumed to be a grammatical error in the message: 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语句不起作用 - JavaScript if statement does not work 如果 with 或语句不起作用 - javascript - If with or statement does not work - javascript Javascript switch 语句不起作用 - Javascript switch statement does not work 为什么此JavaScript if语句不起作用？ - Why does this JavaScript if statement not work? 使用 if 语句重定向用户的 HTML Javascript 不起作用 - HTML Javascript redirecting user with if statement does not work JavaScript：在if语句中工作的for循环在三元语句中工作不？ 为什么？ - JavaScript: The `for loop` that works in an `if` statement does not work in a `ternary` statement? Why? 在JavaScript中，forEach回调如何在后台运行？ 有收益声明吗？ - How does the forEach callback work behind the scenes in javascript? Is there a yield statement? 使用javascript生成CKEDITOR不适用于for循环语句 - Generating CKEDITOR does not work on for loop statement using javascript Javascript：创建一个对象而不是返回语句？ 这是如何运作的？ - Javascript: creating an object instead the return statement? How does this work? 为什么这个基本的if语句不起作用？ JavaScript的 - Why does this basic if-statement fail to work? JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM