2017-11-11 28 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檢查我的答案 –