Question

我是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";
};

当我得到足够的糖果时，

不起作用（显示隐藏的按钮）。

Answer 1

将if statement放在每个功能中。目前它只运行一次，当页面加载时。

Answer 2

问题是，当您加载页面时，此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";
    };
}

Answer 3

将您的代码放在一个函数中：

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();
};

Answer 4

我添加了checkIs30Candies（）函数。还将样式更改为style.display =＆＃34; inline-block＆＃34; （在你的情况下，我想它必须是内联块）

你有一个错字

＆＃13;

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

＆＃13;

它应该是onclick =＆＃34; add10Candies（）＆＃34;，用大括号来调用函数

＆＃13;

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

＆＃13;

Answer 5

您应该将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";
    }
}

Answer 6

您需要添加此代码

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条件在函数之外，所以它不会被执行。

Answer 7

也许一种更简单的方式来写这个（也有更多'更简单'的水平）。尽可能重用常用的代码。

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>

Javascript“if”语句不起作用

7 个答案: