制作一个计算器,当值为负时需要文本变成红色

时间:2017-11-28 17:48:29

标签: javascript html calculator

我必须为课堂制作一个主题计算器,所以我随机选择了圣诞节。哈哈,忽略那一部分。一个要求是我的文本必须在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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我已修复您的代码,但您应该真正倾听评论 - 即使您不想手动将代码格式化,例如,http://jsbeautifier.org/不是那很难。

另外,请注意大括号(&#34; {&#34;和&#34;}&#34;)有特定目的,你应该用分号结束你的行(&#34; ;&#34;。)

&#13;
&#13;
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;
&#13;
&#13;