2017-11-11 116 views
0

我试图弄清楚如何将num1 num2和func的值输出到用户看到的屏幕上。这是一个计算器应用程序即时试图完全功能。该应用程序已经工作,但我似乎无法得到数字和操作设置为变量func显示给用户的屏幕。 如果您需要更多信息,请让我知道。将值输出给用户

$(document).ready(function() { 
 
    var num1 = [] 
 

 
    var num2 = [] 
 

 
    var func = null 
 

 
    $('#one').click(function() { 
 
    if (func === null) { 
 
     num1.push('1') 
 
     console.log(num1) 
 
    } else { 
 
     num2.push('1') 
 
     console.log(num2) 
 
    } 
 
    }); 
 

 
    $('#two').click(function() { 
 
    if (func === null) { 
 
     num1.push('2') 
 
     console.log(num1) 
 
    } else { 
 
     num2.push('2') 
 
     console.log(num2) 
 
    } 
 
    }); 
 

 
    $('#three').click(function() { 
 
    if (func === null) { 
 
     num1.push('3') 
 
    } else { 
 
     num2.push('3') 
 
    } 
 
    }); 
 

 
    $('#four').click(function() { 
 
    if (func === null) { 
 
     num1.push('4') 
 
    } else { 
 
     num2.push('4') 
 
    } 
 
    }); 
 

 
    $('#five').click(function() { 
 
    if (func === null) { 
 
     num1.push('5') 
 
    } else { 
 
     num2.push('5') 
 
    } 
 
    }); 
 

 
    $('#six').click(function() { 
 
    if (func === null) { 
 
     num1.push('6') 
 
    } else { 
 
     num2.push('6') 
 
    } 
 
    }); 
 

 
    $('#seven').click(function() { 
 
    if (func === null) { 
 
     num1.push('7') 
 
    } else { 
 
     num2.push('7') 
 
    } 
 
    }); 
 

 
    $('#eight').click(function() { 
 
    if (func === null) { 
 
     num1.push('8') 
 
    } else { 
 
     num2.push('8') 
 
    } 
 
    }); 
 

 
    $('#nine').click(function() { 
 
    if (func === null) { 
 
     num1.push('9') 
 
    } else { 
 
     num2.push('9') 
 
    } 
 
    }); 
 

 
    $("#zero").click(function() { 
 
    if (func === null) { 
 
     num1.push('0') 
 
    } else { 
 
     num2.push('0') 
 
    } 
 
    }); 
 

 
    $('#plus').click(function() { 
 
    func = "+" 
 
    console.log(func) 
 
    }); 
 

 
    $('#minus').click(function() { 
 
    func = "-" 
 
    }); 
 

 
    $('#divide').click(function() { 
 
    func = "/" 
 
    }); 
 

 
    $('#multiply').click(function() { 
 
    func = "*" 
 
    console.log(func) 
 
    }); 
 

 
    $('#equals').click(function() { 
 
    if (func === "+") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 + number2 
 
     console.log(complete) 
 
    } else if (func === "-") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 - number2 
 
     console.log(complete) 
 
    } else if (func === "*") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 * number2 
 
     console.log(complete) 
 
    } else if (func === "/") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1/number2 
 
     console.log(complete) 
 
    } else { 
 
     console.log("error") 
 
    } 
 
    }); 
 

 
    $('#clear').click(function() { 
 
    num1 = [] 
 
    num2 = [] 
 
    func = null 
 
    console.log(num1) 
 
    console.log(num2) 
 
    console.log(func) 
 
    }); 
 

 

 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> 
 
</script> 
 

 
<div id="calculator-container"> 
 
    <form class="show"> 
 
    <input type="text" name="numbers" disabled><br> 
 
    </form> 
 
    <center> 
 
    <div class="calculator-view"> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <button id="clear" type="button">AC</button> 
 
      <button id="sign" type="button">+/-</button> 
 
      <button id="divide" type="button">÷</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="seven" type="button">7</button> 
 
      <button id="eight" type="button">8</button> 
 
      <button id="nine" type="button">9</button> 
 
      <button id="multiply" type="button">X</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="four" type="button">4</button> 
 
      <button id="five" type="button">5</button> 
 
      <button id="six" type="button">6</button> 
 
      <button id="minus" type="button">-</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="one" type="button">1</button> 
 
      <button id="two" type="button">2</button> 
 
      <button id="three" type="button">3</button> 
 
      <button id="plus" type="button">+</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="zero" type="button">0</button> 
 
      <button id="equals" type="button">=</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div>

+0

绑定所有的点击次数也请添加您的HTML,什么是错误你越来越多了? –

回答

1

你可以简单地显示使用$("#res").val(num1);和替代id我会建议class和使用类这样

$(document).ready(function() { 
 
    var num1 = [] 
 

 
    var num2 = [] 
 

 
    var func = null 
 

 
    $('.num').click(function() { 
 
    if (func === null) { 
 
     num1.push($(this).text()) 
 
     console.log(num1) 
 
     $("#res").val(num1.join('')); 
 

 
    } else { 
 
     num2.push($(this).text()) 
 
     console.log(num2) 
 
     $("#res").val(num2.join('')); 
 
    } 
 
    }); 
 

 
    $('.action').click(function() { 
 
    func = $(this).text(); 
 
    console.log(func) 
 
    $("#res").val(func); 
 
    }); 
 

 

 

 
    $('#equals').click(function() { 
 
    if (func === "+") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 + number2 
 
     console.log(complete) 
 
    } else if (func === "-") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 - number2 
 
     console.log(complete) 
 
    } else if (func === "*") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 * number2 
 
     console.log(complete) 
 
    } else if (func === "/") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1/number2 
 
     console.log(complete) 
 
    } else { 
 
     console.log("error") 
 
    } 
 
    $("#res").val(complete); 
 
    }); 
 

 
    $('#clear').click(function() { 
 
    num1 = [] 
 
    num2 = [] 
 
    func = null 
 
    console.log(num1) 
 
    console.log(num2) 
 
    console.log(func) 
 
    }); 
 

 

 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> 
 
</script> 
 

 
<div id="calculator-container"> 
 
    <form class="show"> 
 
    <input type="text" id="res" name="numbers" disabled><br> 
 
    </form> 
 
    <center> 
 
    <div class="calculator-view"> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <button id="clear" type="button">AC</button> 
 
      <button id="sign" class="action" type="button">+/-</button> 
 
      <button id="divide" class="action" type="button">÷</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="seven" class="num" type="button">7</button> 
 
      <button id="eight" class="num" type="button">8</button> 
 
      <button id="nine" class="num" type="button">9</button> 
 
      <button id="multiply" class="action" type="button">X</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="four" class="num" type="button">4</button> 
 
      <button id="five" class="num" type="button">5</button> 
 
      <button id="six" class="num" class="num" type="button">6</button> 
 
      <button id="minus" class="action" type="button">-</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="one" class="num" type="button">1</button> 
 
      <button id="two" class="num" type="button">2</button> 
 
      <button id="three" class="num" type="button">3</button> 
 
      <button id="plus" class="action" type="button">+</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="zero" class="num" type="button">0</button> 
 
      <button id="equals" type="button">=</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div>

+0

非常感谢!我非常喜欢所有点击的绑定!真的让代码变干! – Thallius

+0

@Thallius很高兴我帮了忙。请接受答案:) –

+0

如果有人正在寻找这个帮助以后,零就缺少一个类。 – Thallius

0

您可以简单地添加一个span到您的网页<span id="result"></span>

然后,你可以展示你的结果与$('#result').html(complete);

此外,您可以显示数以同样的方式而用户为它们数字。

+0

我似乎无法得到这个工作 – Thallius

+0

@Thallius检查我的答案 –