2017-05-18 1 views
0

Funktion ist ein Klick spät jquery

$(document).ready(function() { 
 

 
    var digit = []; 
 
    var digitStr; 
 
    var displayDigit = []; 
 
    var screen; 
 

 
    function display() { 
 
    displayDigit = digitStr.split(/[*/+-]/); 
 
    for (var i = 0; i < displayDigit.length; i++) { 
 
     screen = displayDigit[i]; 
 
    };  
 
    }; 
 

 
    function point() { 
 
    if (digitStr.match(/[*/+-]?\d*\.\d*$/)) { 
 
     return; 
 
    } else { 
 
     digit.push("."); 
 
    } 
 
    }; 
 

 
    function result() { 
 
    var a = (displayDigit[0]) - 0; 
 
    var b = (displayDigit[1]) - 0; 
 
    screen = (a + b); 
 
    }; 
 

 
    function displayZero() { 
 
    screen = 0; 
 
    } 
 

 
    $("button").on("click", function() { 
 
    switch (this.id) { 
 
     case "one": 
 
     digit.push(1); 
 
     break; 
 
     case "two": 
 
     digit.push(2); 
 
     break; 
 
     case "three": 
 
     digit.push(3); 
 
     break; 
 
     case "four": 
 
     digit.push(4); 
 
     break; 
 
     case "five": 
 
     digit.push(5); 
 
     break; 
 
     case "six": 
 
     digit.push(6); 
 
     break; 
 
     case "seven": 
 
     digit.push(7); 
 
     break; 
 
     case "eight": 
 
     digit.push(8); 
 
     break; 
 
     case "nine": 
 
     digit.push(9); 
 
     break; 
 
     case "zero": 
 
     digit.push(0); 
 
     break; 
 
     case "point": 
 
     point(); 
 
     break; 
 
     case "add": 
 
     digit.push("+"); 
 
     break; 
 
     case "subtract": 
 
     digit.push("-"); 
 
     break; 
 
     case "multiply": 
 
     digit.push("*"); 
 
     break; 
 
     case "divide": 
 
     digit.push("/"); 
 
     break; 
 
     case "ce": 
 
     digit.pop(); 
 
     break; 
 
     case "clear": 
 
     digit = []; 
 
     displayZero(); 
 
     break; 
 
     case "equal": 
 
     result(); 
 
     
 
    }; 
 

 
    digitStr = digit.join(""); 
 
    $("#second").text(digitStr); 
 
    //display(); 
 
    $("#main").text(screen); 
 
    display(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> 
 
<div class="container"> 
 
    <br> 
 
    <div class="calc col-md-4"> 
 
    <div class="row"><span id="main">0</span>  
 
    </div>  
 
    <div class="row small" id="second">0<p class="text-right"></p> 
 
    </div><br> 
 
    <!--<p>0</p>--> 
 
    <div class="row first"> 
 
     <button type="button" class="btn btn-danger" id="clear">Clear</button> 
 
     <button type="button" class="btn" id="ce">CE</button> 
 
     <button type="button" class="btn oper" id="add">+</button> 
 
    </div><br> 
 
    <div class="row second"> 
 
     <button type="button" class="btn" id="seven">7</button> 
 
     <button type="button" class="btn" id="eight">8</button> 
 
     <button type="button" class="btn" id="nine">9</button> 
 
     <button type="button" class="btn oper" id="subtract">-</button>  
 
    </div><br> 
 
    <div class="row third"> 
 
     <button type="button" class="btn" id="four">4</button> 
 
     <button type="button" class="btn" id="five">5</button> 
 
     <button type="button" class="btn" id="six">6</button> 
 
     <button type="button" class="btn oper" id="multiply">*</button> 
 
    </div><br> 
 
    <div class="row fourth"> 
 
     <button type="button" class="btn" id="one">1</button> 
 
     <button type="button" class="btn" id="two">2</button> 
 
     <button type="button" class="btn" id="three">3</button> 
 
     <button type="button" class="btn oper" id="divide">/</button> 
 
    </div><br> 
 
    <div class="row fifth"> 
 
     <button type="button" class="btn" id="zero">0</button> 
 
     <button type="button" class="btn" id="point">.</button> 
 
     <button type="button" class="btn" id="equal">=</button> 
 
    </div>  
 
    </div> 
 
</div>

ich einen einfachen Rechner machen und ein Problem mit Funktionsanzeige mit. Wenn ich die Funktion am Ende aufruft, wie es im Beispiel gezeigt wird, ist es ein Klick zu spät. Ich weiß, dass diese Funktion zuerst den Anfangswert der globalen Variablen Bildschirm (ein leeres) anzeigt, und ich weiß nicht, wie man es davon abhält. Wenn ich Funktion vor $ aufrufen ("# main"). Text (Bildschirm); (es ist im Beispiel kommentiert), es funktioniert gut, aber die Funktionen innerhalb der Switch-Methode funktionieren nicht mehr (result(), displayZero()). Funktion Ergebnis ist absichtlich so einfach wie a + b, so, bitte, verwenden Sie einfach a + b zum Testen. Jede Hilfe wird geschätzt.

$(document).ready(function(){ 

var digit = []; 
var digitStr; 
var displayDigit = []; 
var screen; 

    function display(){ 
displayDigit = digitStr.split(/[*/+-]/); 
for(var i = 0; i < displayDigit.length; i++){ 
    screen = displayDigit[i];   
}; 
}; 

    function point(){  
if(digitStr.match(/[*/+-]?\d*\.\d*$/)){ 
    return;  
}else{ 
    digit.push(".");   
}  
}; 

    function result(){  
    var a = (displayDigit[0])-0; 
    var b = (displayDigit[1])-0;  
    screen = (a+b);  
}; 

function displayZero(){ 
screen = 0; 
} 

$("button").on("click",function(){  
    switch(this.id){ 
    case "one": digit.push(1);      
    break; 
    case "two": digit.push(2); 
    break; 
    case "three": digit.push(3);   
    break; 
    case "four": digit.push(4);  
    break; 
    case "five": digit.push(5);   
    break; 
    case "six": digit.push(6);   
    break; 
    case "seven": digit.push(7);   
    break; 
    case "eight": digit.push(8);      
    break; 
    case "nine": digit.push(9);   
    break; 
    case "zero": digit.push(0);   
    break; 
    case "point": point();   
    break; 
    case "add": digit.push("+");   
    break; 
    case "subtract": digit.push("-");   
    break; 
    case "multiply": digit.push("*");   
    break; 
    case "divide": digit.push("/");   
    break; 
    case "ce": digit.pop();   
    break; 
    case "clear": digit = []; 
        displayZero(); 
    break; 
    case "equal": result();   
      };  

    digitStr = digit.join("");  
$("#second").text(digitStr); 
    //display();  
$("#main").text(screen); 
    display(); 

}); 
}); 

Antwort

1

Sie die Lösung in Ihrem Code haben, müssen Sie nur Ihre display() Funktion aufrufen, die den Wert für screen aktualisiert, bevor Sie das Element für screen auf den Wert von screen eingestellt.

$(document).ready(function() { 
 

 
    var digit = []; 
 
    var digitStr; 
 
    var displayDigit = []; 
 
    var screen; 
 

 
    function display() { 
 
    displayDigit = digitStr.split(/[*/+-]/); 
 
    for (var i = 0; i < displayDigit.length; i++) { 
 
     screen = displayDigit[i]; 
 
    }; 
 
    $("#main").text(screen); 
 
    }; 
 

 
    function point() { 
 
    if (digitStr.match(/[*/+-]?\d*\.\d*$/)) { 
 
     return; 
 
    } else { 
 
     digit.push("."); 
 
    } 
 
    }; 
 

 
    function result() { 
 
    var a = (displayDigit[0]) - 0; 
 
    var b = (displayDigit[1]) - 0; 
 
    screen = (a + b); 
 
    $("#main").text(screen); 
 
    }; 
 

 
    function displayZero() { 
 
    screen = 0; 
 
    } 
 

 
    $("button").on("click", function() { 
 
    switch (this.id) { 
 
     case "one": 
 
     digit.push(1); 
 
     break; 
 
     case "two": 
 
     digit.push(2); 
 
     break; 
 
     case "three": 
 
     digit.push(3); 
 
     break; 
 
     case "four": 
 
     digit.push(4); 
 
     break; 
 
     case "five": 
 
     digit.push(5); 
 
     break; 
 
     case "six": 
 
     digit.push(6); 
 
     break; 
 
     case "seven": 
 
     digit.push(7); 
 
     break; 
 
     case "eight": 
 
     digit.push(8); 
 
     break; 
 
     case "nine": 
 
     digit.push(9); 
 
     break; 
 
     case "zero": 
 
     digit.push(0); 
 
     break; 
 
     case "point": 
 
     point(); 
 
     break; 
 
     case "add": 
 
     digit.push("+"); 
 
     break; 
 
     case "subtract": 
 
     digit.push("-"); 
 
     break; 
 
     case "multiply": 
 
     digit.push("*"); 
 
     break; 
 
     case "divide": 
 
     digit.push("/"); 
 
     break; 
 
     case "ce": 
 
     digit.pop(); 
 
     break; 
 
     case "clear": 
 
     digit = []; 
 
     displayZero(); 
 
     break; 
 
     case "equal": 
 
     result(); 
 
     return; 
 
    }; 
 

 
    digitStr = digit.join(""); 
 
    $("#second").text(digitStr); 
 
    display(); 
 
    }); 
 
});
body { 
 
    /*background-image: url("http://www.publicdomainpictures.net/pictures/50000/velka/random-numbers.jpg"); 
 
    background-size: 100%;*/ 
 
} 
 

 
.calc { 
 
    background-color: oange; 
 
    padding: 4%; 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.45); 
 
    border-radius: 5%; 
 
} 
 

 
#main { 
 
    background-color: #cccccc; 
 
    color: black; 
 
    height: 50px; 
 
    width: 100%; 
 
    font-size: 30px; 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 
 
    border-radius: 5%; 
 
    padding-left: 5%; 
 
    font-family: 'Abril Fatface', cursive; 
 
} 
 

 
#second { 
 
    height: 20px; 
 
    font-size: 20px; 
 
} 
 

 

 
/*.well-small{ 
 
    text-align: right; 
 
}*/ 
 

 
button { 
 
    margin: 1%; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1); 
 
} 
 

 
button:hover { 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 
 
} 
 

 
#clear, 
 
#equal { 
 
    width: 48%; 
 
} 
 

 
#ce, 
 
#add, 
 
#seven, 
 
#eight, 
 
#nine, 
 
#subtract, 
 
#four, 
 
#five, 
 
#six, 
 
#multiply, 
 
#one, 
 
#two, 
 
#three, 
 
#divide, 
 
#zero, 
 
#point { 
 
    width: 23%; 
 
} 
 

 
#seven, 
 
#eight, 
 
#nine, 
 
#four, 
 
#five, 
 
#six, 
 
#one, 
 
#two, 
 
#three, 
 
#zero, 
 
#point { 
 
    background-color: gray; 
 
} 
 

 
#add, 
 
#subtract, 
 
#multiply, 
 
#divide { 
 
    background-color: black; 
 
    color: #ffd6cc; 
 
} 
 

 
#equal { 
 
    background-color: black; 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
#ce { 
 
    background-color: #ffd6cc; 
 
} 
 

 
.small { 
 
    color: gray; 
 
    padding-left: 5%; 
 
} 
 

 

 
/*p{ 
 
    font-size: 200px; 
 
    position: absolute; 
 
    color: gray; 
 
}*/ 
 

 
footer { 
 
    position: fixed; 
 
    left: 0px; 
 
    bottom: 0px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> 
 
<div class="container"> 
 
    <br> 
 
    <div class="calc col-md-4"> 
 
    <div class="row"><span id="main">0</span> 
 
    </div> 
 
    <div class="row small" id="second">0 
 
     <p class="text-right"></p> 
 
    </div><br> 
 
    <!--<p>0</p>--> 
 
    <div class="row first"> 
 
     <button type="button" class="btn btn-danger" id="clear">Clear</button> 
 
     <button type="button" class="btn" id="ce">CE</button> 
 
     <button type="button" class="btn oper" id="add">+</button> 
 
    </div><br> 
 
    <div class="row second"> 
 
     <button type="button" class="btn" id="seven">7</button> 
 
     <button type="button" class="btn" id="eight">8</button> 
 
     <button type="button" class="btn" id="nine">9</button> 
 
     <button type="button" class="btn oper" id="subtract">-</button> 
 
    </div><br> 
 
    <div class="row third"> 
 
     <button type="button" class="btn" id="four">4</button> 
 
     <button type="button" class="btn" id="five">5</button> 
 
     <button type="button" class="btn" id="six">6</button> 
 
     <button type="button" class="btn oper" id="multiply">*</button> 
 
    </div><br> 
 
    <div class="row fourth"> 
 
     <button type="button" class="btn" id="one">1</button> 
 
     <button type="button" class="btn" id="two">2</button> 
 
     <button type="button" class="btn" id="three">3</button> 
 
     <button type="button" class="btn oper" id="divide">/</button> 
 
    </div><br> 
 
    <div class="row fifth"> 
 
     <button type="button" class="btn" id="zero">0</button> 
 
     <button type="button" class="btn" id="point">.</button> 
 
     <button type="button" class="btn" id="equal">=</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<footer>Created by IvanaGoSt</footer>

+0

Es macht nichts, ich sehe jetzt, dass es die Frage ist, wo Ihre Betreiber mehr funktionieren. Ich lasse meine Antwort für jetzt und werde zurückkommen, um nach dem Treffen zu helfen, in das ich mich begeben werde. – Ken

+0

Danke trotzdem. Ich freue mich von Ihnen zu hören. Prost! –

+0

@IvanaGoSt Also habe ich den Code zum Einstellen von Haupttext in das Display verschoben und das Ergebnis ruft auf. Dieser Code könnte vollständig refaktoriert werden, um eine einzige Methode zum Aktualisieren des Bildschirms und eine weitere zum Ausführen von Berechnungen zu haben, so dass Sie nicht zwei Methoden mit überlappenden Verantwortlichkeiten haben, aber ich wollte nicht weit von Ihrer ursprünglichen Implementierung abweichen. – Ken