我必须为课堂制作一个主题计算器,所以我随机选择了圣诞节。哈哈,忽略那一部分。一个要求是我的文本必须在calc的输出值时变为红色。是负面的,所以我在JavaScript部分做了一个if循环。它不会工作,我一直在这里工作。循环有问题吗?感谢
<html>
<head>
<script>
{ function sum(){
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 + Box2
document.getElementById("Box3").value = Box3
{if (Box3>0){
Box3.style.color = rgb(60, 179, 113)}
else {Box3.style.color = rgb(255, 0, 0)}}
}
function minus(){
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 - Box2
document.getElementById("Box3").value = Box3
}
function divide(){
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1/Box2
document.getElementById("Box3").value = Box3
}
function mult(){
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 * Box2
document.getElementById("Box3").value = Box3
}
function powers(){
var result= 1
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
for (i = 0; i < Box2; i++) {
result = result * Box1
}
document.getElementById("Box3").value = result
}
function erase(){
document.getElementById('Box1').value = "";
document.getElementById('Box2').value = "";
document.getElementById('Box3').value = "";
}
{if (Box3>0){
Box3.style.color = rgb(60, 179, 113)}
else {Box3.style.color = rgb(255, 0, 0)}
}
}
</script>
</head>
<body>
<font face="KR Cane Letters" size="50" color="red">Welcome</font>
<div>
</div>
<font face="KR Cane Letters" size="50" color="green">to the CHRISTMAS Calculator!!!</font>
<div>
</div>
<input type="text" id="Box1">
<input type="text" id="Box2">
<p>=</p>
<input type="text" id="Box3">
<button onclick="sum()">+</button>
<button onclick="minus()">-</button>
<button onclick="divide()">/</button>
<button onclick="mult()">*</button>
<button onclick="powers()">^</button>
<button onclick="erase()">Erase</button>
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-5/hol441.ani), url(http://cur.cursors-4u.net/holidays/hol-5/hol441.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/17/decorated-green-christmas-tree.html" target="_blank" title="Decorated Green Christmas Tree"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Decorated Green Christmas Tree" style="position:absolute; top: 0px; right: 0px;" /></a>
</body>
</html>
&#13;
答案 0 :(得分:0)
我已修复您的代码,但您应该真正倾听评论 - 即使您不想手动将代码格式化,例如,http://jsbeautifier.org/不是那很难。
另外,请注意大括号(&#34; {&#34;和&#34;}&#34;)有特定目的,你应该用分号结束你的行(&#34; ;&#34;。)
function sum() {
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 + Box2;
document.getElementById("Box3").value = Box3;
colourBox3(Box3);
}
function minus() {
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 - Box2;
document.getElementById("Box3").value = Box3;
colourBox3(Box3);
}
function divide() {
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 / Box2;
document.getElementById("Box3").value = Box3;
colourBox3(Box3);
}
function mult() {
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
var Box3 = Box1 * Box2;
document.getElementById("Box3").value = Box3;
colourBox3(Box3);
}
function powers() {
var result = 1
var Box1 = Number(document.getElementById("Box1").value);
var Box2 = Number(document.getElementById("Box2").value);
for (i = 0; i < Box2; i++) {
result = result * Box1;
}
document.getElementById("Box3").value = result;
colourBox3(result);
}
function erase() {
document.getElementById('Box1').value = "";
document.getElementById('Box2').value = "";
document.getElementById('Box3').value = "";
}
function colourBox3(val) {
if (val > 0) {
document.getElementById("Box3").style.color = "rgb(60, 179, 113)";
} else {
document.getElementById("Box3").style.color = "rgb(255, 0, 0)";
}
}
&#13;
<html>
<head>
</head>
<body>
<font face="KR Cane Letters" size="50" color="red">Welcome</font>
<div>
</div>
<font face="KR Cane Letters" size="50" color="green">to the CHRISTMAS Calculator!!!</font>
<div>
</div>
<input type="text" id="Box1">
<input type="text" id="Box2">
<p>=</p>
<input type="text" id="Box3">
<button onclick="sum()">+</button>
<button onclick="minus()">-</button>
<button onclick="divide()">/</button>
<button onclick="mult()">*</button>
<button onclick="powers()">^</button>
<button onclick="erase()">Erase</button>
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-5/hol441.ani), url(http://cur.cursors-4u.net/holidays/hol-5/hol441.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/17/decorated-green-christmas-tree.html" target="_blank" title="Decorated Green Christmas Tree"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Decorated Green Christmas Tree" style="position:absolute; top: 0px; right: 0px;" /></a>
</body>
</html>
&#13;