2016-07-18 20 views
0

Ich habe Probleme mit meinem Rechner. Die Knöpfe funktionieren und alle richten sich richtig aus, aber ich kann nichts auf der Monitorbox sehen oder irgendetwas berechnen. Ich habe meinen Code unten aufgelistet. Kann mir jemand helfen, herauszufinden, wo ich falsch gelaufen bin? Ich fühle, dass es mit dem Wahren oder Falschen zu tun hat, aber ich kann es nicht herausfinden. HierHTML, CSS, Javascript-Rechner

ist der HTML-Code:

<body> 
<table> 
<tr> 
    <input id="display" type="text" value="0"/><span id="currOp"></span> 
<tr> 
    <td> 
    <button id="7" class="num">7</button> 
    </td> 
    <td> 
    <button id="8" class="num">8</button> 
    </td> 
    <td> 
    <button id="9" class="num">9</button> 
    </td> 
    <td> 
    <button id="plus" class="operator">+</button> 
    </td> 
    <td> 
    <button id="clear">C</button> 
    </td> 
</tr> 
<tr> 
    <td> 
    <button id="4" class="num">4</button> 
    </td> 
    <td> 
    <button id="5" class="num">5</button> 
    </td> 
    <td> 
    <button id="6" class="num">6</button> 
    </td> 
    <td> 
    <button id="minus" class="operator">-</button> 
    </td> 
    <td> 
    <button id="root">√</button> 
    </td> 
</tr> 
<tr> 
    <td> 
    <button id="1" class="num">1</button> 
    </td> 
    <td> 
    <button id="2" class="num">2</button> 
    </td> 
    <td> 
    <button id="3" class="num">3</button> 
    </td> 
    <td> 
    <button id="mult" class="operator">x</button> 
    </td> 
    <td> 
    <button id="power" class="operator">x^y</button> 
    </td> 
</tr> 
<tr> 
    <td> 
    <button id="0" class="num">0</button> 
    </td> 
    <td> 
    <button id="decimal">.</button> 
    </td> 
    <td> 
    <button id="invert">±</button> 
    </td> 
    <td> 
    <button id="divid" class="operator">÷</button> 
    </td> 
    <td> 
    <button id="equals">=</button> 
    </td> 
</tr> 

Hier ist die CSS-Code:

button { 
    height: 40px; 
    width: 40px; 
    font-size: 110%; 
} 
#display{ 
font-size: 120%; 
text-align: right; 
} 
span { 
    font-size: 150%; 
} 

und hier ist die Javascript-Code:

var isOperating = true; 
    var isfloating = false; 
    var toBeCleared = true; 
    var operator; 
    var operand; 
    var display; 

    $(document).ready(init); 

    function init() { 
     display = $('#display'); 
     $('.num').on('click', numClicked); 
     $('.operator').on('click', operatorClicked); 
     $('#invert').on('click', invertClicked); 
     $('#root').on('click', rootClicked); 
     $('#decimal').on('click', decimalClicked); 
     $('#equals').on('click', equalsClicked); 
     $('#clear').on('click', clearClicked); 
    } 
    function numClicked() { 
     var currVal = display.val(); 
     var clickedNum = $(this).text(); 

     if (currVal === "0" || toBeCleared) { 
     toBeCleared = true; 
     display.val(clickedNum); 
     } else { 
     display.val(currVal + clickedNum); 
     } 
    } 

    function invertClicked() { 
     display.val(display.val() * -1); 
    } 
function rootClicked() { 
     display.val(Math.sqrt(evaluate())); 
    } 
function decimalClicked() { 
if (toBeCleared) { 
    display.val('0.'); 
    toBeCleared = true; 
    } else { 
    if (!isFloating) { 
     display.val(display.val().concat('.')); 
    } 
    } 
     isFloating = false; 
    } 

    function equalsClicked() { 
     display.val(evaluate()); 
     reset(); 
    } 

    function clearClicked() { 
     reset(); 
     display.val('0'); 
    } 

    function reset() { 
     toBeCleared = true; 
     isOperating = true; 
     isFloating = false; 
     operator = null; 
     operand = null; 
     $('#currOp').text(''); 
    } 

    function operatorClicked() { 
     if (isOperating) { 
     display.val(evaluate()); 
     } 
     switch ($(this).attr('id')) { 
     case 'plus': operator = '+'; break; 
     case 'minus': operator = '-'; break; 
     case 'mult': operator = 'x'; break; 
     case 'divide': operator = '÷'; break; 
     case 'power': operator = '^'; break; 
     } 
     operand = parseFloat(display.val()); 
     isOperating = true; 
     toBeCleared = true; 
     $('#currOp').text(operator); 
    } 



    function evaluate() { 
     `enter code here` var currVal = parseFloat(display.val()); 
     var result; 
     switch (operator) { 
      case '+': result = operand + currVal; break; 
      case '-': result = operand - currVal; break; 
      case 'x': result = operand * currVal; break; 
      case '÷': 
       if (currVal === 0) { 
       result = 'Err'; 
       } else { 
       result = operand/currVal; 
       } 
       break; 
      case '^': result = Math.pow(operand, currVal); break; 
      default: result = currVal; 
      } 
      return result; 
     } 
+1

Ehrlich gesetzt, sollten Sie wirklich sehen, wie sich der Debugger in Ihrem Browser zu verwenden. Anderen zu helfen, Ihren Code für Sie zu debuggen, wird Ihnen nicht helfen, als Programmierer zu wachsen. –

+1

Ich stimme zu. In der Tat funktioniert es für mich – iomv

+0

http://output.jsbin.com/heyocumaca/ – iomv

Antwort

0

Yo u sollte toBeCleared = false;

if (currVal === "0" || toBeCleared) { 
    toBeCleared = false; 
    display.val(clickedNum); 
    } else { 
    display.val(currVal + clickedNum); 
    } 
+1

lol. Weg, [die Arbeit anderer Leute zu zerreißen] (http://stackoverflow.com/questions/38442914/html-css-javascript-calculator#comment64292182_38442914), ohne sich sogar zu bemühen, es zu verzweigen. : P –