機能は、ワンクリック後半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>

私はシンプルな電卓を作り、機能表示に問題を抱えているです。この例のように最後に関数を呼び出すと、クリックが遅くなります。私は関数が最初にグローバル変数の画面の最初の値を表示することを知っています（空のもの）と私はそれをやることからそれを停止する方法を知らない。 $（ "＃main"）より前に関数を呼び出すと、テキスト（画面）が表示されます。（この例ではコメントしています）、うまくいきますが、switchメソッド内の関数は動作しません（result（）、displayZero（））。 機能の結果は、a + bのように単純にそのまま残っていますので、テストのためにa + bを使用してください。ヘルプが表示されます。

$(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(); 

}); 
});

出典

2017-05-18 Ivana GoSt

あなたはあなたのコード内のソリューションを持っている、あなたはちょうどあなたがscreenの値にscreenための要素を設定する前にscreenの値を更新し、あなたのdisplay()関数を呼び出す必要があります。

$(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>

出典

2017-05-18 16:55:54 Ken

気にしないで、私はあなたの事業者が機能を停止し、問題があることが今参照してください。私は今私の答えを残していて、私が行く予定の会議の後に助けに戻ってくるでしょう。とにかくありがとうございます。 – Ken

お返事を待っています。乾杯！ –

@IvanaGoStだから私はメインテキストを表示するためのコードを移動し、結果を呼び出しました。このコードは、スクリーンを更新するための単一のメソッドと計算の実行のために完全にリファクタリングすることができ、重複した責任を持つ2つのメソッドを持たないようにしましたが、元の実装からは遠ざけたくありませんでした。 – Ken

機能は、ワンクリック後半jqueryの

答えて

関連する問題