使用Switch语句的Javascript计算器_Javascript_Switch Statement_Calculator

使用Switch语句的Javascript计算器

javascript

使用Switch语句的Javascript计算器,javascript,switch-statement,calculator,Javascript,Switch Statement,Calculator,这是我到目前为止所拥有的。在我开始计算后，我很难让计算器清零。一旦我得到答案，它会在输入数字的框中显示NAN。建议将是伟大的！多谢各位 <HTML> <HEAD> <script type = "text/javascript"> function divide() { document.calculator.output.value += "/"; } func

这是我到目前为止所拥有的。在我开始计算后，我很难让计算器清零。一旦我得到答案，它会在输入数字的框中显示NAN。建议将是伟大的！多谢各位

<HTML>
<HEAD>
    <script type = "text/javascript">
        function divide()
        {
            document.calculator.output.value += "/";
        }
        function add()
        {
            document.calculator.output.value += "+";
        }
        function num9()
        {
            document.calculator.output.value += "9";
        }
        function num8()
        {
            document.calculator.output.value += "8";
        }
        function num7()
        {
            document.calculator.output.value += "7";

        }
        function multiply()
        {
            document.calculator.output.value += "*";
        }
        function percent()
        {
            document.calculator.output.value += "%";
        }
        function num6()
        {
            document.calculator.output.value += "6";
        }
        function num5()
        {
            document.calculator.output.value += "5";
        }

        function num4()
        {
            document.calculator.output.value += "4";
        }


        function subtr()
        {
            document.calculator.output.value += "-";
        }

        function num3()
        {
            document.calculator.output.value += "3";
        }

        function num2()
        {
            document.calculator.output.value += "2";
        }

        function num1()
        {
            document.calculator.output.value += "1";
        }

        function numZero()
        {
            document.calculator.output.value += "0";
        }

function buildFormula()
{
var evalu= alert(eval(document.calculator.output.value)) + document.clear();
document.calculator.output.value= evalu;
}


</script>
</HEAD>
<BODY>
<form name="calculator">

<table border=0>
<tr>
    <td colspan=4><input type=text readonly=true name="output" size = 25></td>
</tr>
<tr>
    <td><input type=button value= "   7   "  onClick="num7()"></td>
    <td><input type=button value= "   8   " onClick="num8()"></td>
    <td><input type=button value= "   9   " onClick="num9()"></td>
    <td><input type=button value= "    /  " onClick="divide()"></td>
    <td><input type=button value= "     + " onClick="add()"></td>
</tr>
<tr>
    <td><input type=button value= "   4   " onClick="num4()"></td>
    <td><input type=button value= "   5 " onClick="num5()"></td>
    <td><input type=button value= "   6  " onClick= "num6()"></td>
    <td><input type=button value= "    *   " onClick= "multiply()"></td>
    <td><input type=button value= "    %    " onClick="percent()"></td>
</tr>
    <tr>
        <td><input type=button value = "   1   " onClick="num1()"></td>
        <td><input type=button value = "   2   " onClick="num2()"></td>
        <td><input type=button value = "   3   " onClick="num3()"></td>
        <td><input type=button value = "    -    " onClick="subtr()"></td>
        <td><input type=button value = "     =     " onClick="buildFormula()"></td>
</tr>
<tr>
    <td colspan=5><input type=button value = "             0             "     onClick="numZero()"></td>
</tr>
</table>
</form>
</BODY>
</HTML>


函数除法（）
{
document.calculator.output.value+=“/”；
}
函数add（）
{
document.calculator.output.value++=“+”；
}
函数num9（）
{
document.calculator.output.value+=“9”；
}
函数num8（）
{
document.calculator.output.value+=“8”；
}
函数num7（）
{
document.calculator.output.value+=“7”；
}
函数乘法（）
{
document.calculator.output.value+=“*”；
}
函数百分比（）
{
document.calculator.output.value+=“%”；
}
函数num6（）
{
document.calculator.output.value+=“6”；
}
函数num5（）
{
document.calculator.output.value+=“5”；
}
函数num4（）
{
document.calculator.output.value+=“4”；
}
函数subtr（）
{
document.calculator.output.value+=“-”；
}
函数num3（）
{
document.calculator.output.value+=“3”；
}
函数num2（）
{
document.calculator.output.value+=“2”；
}
函数num1（）
{
document.calculator.output.value+=“1”；
}
函数numZero（）
{
document.calculator.output.value+=“0”；
}
函数buildFormula（）
{
var evalu=alert（eval（document.calculator.output.value））+document.clear（）；
document.calculator.output.value=evalu；
}

如果使用HTML，则应指定doctype，并确保HTML有效

最好不要将html与javascript混合使用，因此在javascript中添加带有

addEventListener

的事件处理程序

最好将事件侦听器添加到包含按钮的容器中，而不是将其添加到每个按钮中

最好在有意义的地方添加脚本。将脚本放在头上，并尝试将事件处理程序添加到尚不存在的元素中没有多大意义。添加额外的脚本来补偿（body.onload）仍然不如在内容末尾添加脚本好

您仍然需要编写switch语句（如果是家庭作业）来计算结果，但数字存储在calc.numbers中，运算符存储在calc.operators中：

<!DOCTYPE html>
<HTML>
<HEAD>
 <title>My calc</title>
</HEAD>
<BODY>
<form name="calculator">
<table  id="buttons">
<tr>
    <td colspan=4><div id="output"></div></td>
</tr>
<tr>
    <td><input type=button value= "   7   "  ></td>
    <td><input type=button value= "   8   " ></td>
    <td><input type=button value= "   9   " ></td>
    <td><input type=button value= "    /    " ></td>
    <td><input type=button value= "     +     " ></td>
</tr>
<tr>
    <td><input type=button value= "   4   " ></td>
    <td><input type=button value= "   5   " ></td>
    <td><input type=button value= "   6   " ></td>
    <td><input type=button value= "    *    " ></td>
    <td><input type=button value= "    %    " ></td>
</tr>
    <tr>
        <td><input type=button value = "   1   " ></td>
        <td><input type=button value = "   2   " ></td>
        <td><input type=button value = "   3   " ></td>
        <td><input type=button value = "    -    " ></td>
        <td><input type=button value = "     =     " ></td>
</tr>
<tr>
    <td colspan=5><input type=button value = "             0             " ></td>
</tr>
</table>
</form>
<script>
var calc={
  curNum:[],
  numbers:[],
  operators:[],
  output:document.getElementById("output"),
  clickHandler:function(e){
    var ev=e||window.event;
    var nr=parseInt(ev.target.value);
    if(isNaN(nr)){
      calc.handleOperator(ev.target.value);
      return;
    }
    calc.curNum.push(nr);
    calc.output.innerHTML=calc.curNum.join("");
  },
  handleOperator:function(val){
    if(val==="     =     "){
      calc.calculateResult();
      return;
    }
    if(calc.curNum.length===0&&calc.numbers.length===0){
      return;
    }
    // when you press + and then % (replace + with %)
    if(calc.curNum.length===0&&calc.operators.length){
      calc.operators[calc.operators.length-1]=val;
    }else{
      calc.operators.push(val);
    }
    calc.numbers.push(parseInt(calc.curNum.join("")));
    // reset current number
    calc.curNum=[];
  },
  calculateResult:function(){
    //you could use switch here but it's complecated
    // to implement 3+2*6 so using eval instead
    // if for your homework you need to use switch then good luck
    // based on the above example you have to calculate 2*6 first
    // so you'll have to loop through the calc.operators a couple of times
    if(calc.curNum.length){
      calc.numbers.push(parseInt(calc.curNum.join("")));
    }
    var i=0,op,res=[];
    for(i=0;i<calc.numbers.length;i=i+1){
      op = ((i)===calc.operators.length)?"":calc.operators[i];
      res.push(calc.numbers[i]);
      res.push(op);
    }
    calc.numbers=[];
    calc.operators=[];
    console.log(res);
    calc.output.innerHTML=(eval(res.join("")));
    calc.curNum=[];
    calc.curNum.push(parseInt(calc.output.innerHTML));
  }
}
document.getElementById("buttons").addEventListener("click",calc.clickHandler);
</script>

</BODY>
</HTML>


我的计算器
变量计算={
curNum:[]，
编号：[]，
操作员：[]，
输出：document.getElementById（“输出”），
clickHandler:函数（e）{
var ev=e | | window.event；
var nr=parseInt（ev.target.value）；
if（伊斯南（北））{
计算手动操作器（ev.目标值）；
回来
}
计算电流推力（nr）；
calc.output.innerHTML=calc.curNum.join（“”）；
},
handleOperator:功能（val）{
如果（val==“=”）{
计算结果（）；
回来
}
if（calc.curNum.length==0&&calc.numbers.length==0）{
回来
}
//按+然后按%（将+替换为%）
if（calc.curNum.length==0&&calc.operators.length）{
计算运算符[计算运算符.长度-1]=val；
}否则{
计算操作员推送（val）；
}
calc.numbers.push（parseInt（calc.curNum.join）（“”））；
//重置当前号码
计算电流=[]；
},
calculateResult:函数（）{
//您可以在这里使用开关，但它很复杂
//要实现3+2*6，请改用eval
//如果你的家庭作业需要使用开关，那么祝你好运
//根据上面的例子，你必须先计算2*6
//所以你必须循环计算操作符几次
if（计算电流长度）{
calc.numbers.push（parseInt（calc.curNum.join）（“”））；
}
var i=0，op，res=[]；
对于（i=0；要使它工作，你必须先尝试一些东西。你的笔记似乎能很好地引导你完成整个过程。为什么不试着按照他们说的去做呢？谢谢你，但是我在计算器中清除它时仍然有一些问题。你能帮我吗谢谢你的帮助。你是100%对的，这是家庭作业。我已经尝试过了ch教程但是当你是一名在线学生并且你的教授从不回复你可能遇到的任何问题时，这会使学习变得非常困难。在5周内自学Java到这种程度对课程来说不是一个好的设置。我下一次的JavaScript体验将是面对面的。感谢你提供的资源，但我仍然有一些问题我在计算器中清除它。你能帮我吗？@EllenHarris要清除计算器，你可以将calc.curNum、calc.numbers和calc.operators设置为[]，并将calc.output的innerHTML设置为“”