JavaScriptで一連の番号を確認する方法

Question

JavaScriptでデジタルボールトロックを作成しています。ページ上の何かをロック解除するには、4つの数字を正しい順番で入力する必要があります。

ページは、10未満の数字を入力するテキストボックスと、数字を送信するボタンを押します。彼らはこれを4回やらなければならず、数字や順序が正しい場合（たとえば4 5 2 7）、ロックが解除されて画像が表示されます。

私はそれを "if"構造で動作させようとしましたが、これを行う正しい方法を考えることはできません。

function checkingcombination(){ 
     if(numberpushed == 4){ 
     if(numberpushed == 5){ 
      if(numberpushed == 2){ 
      if(numberpushed == 7){ 
       alert("lock unlocked, welcome"); 
      } 
      else{ 
      alert("wrong combination"); 
      return; 
      } 
      } 
      else{ 
      alert("wrong combination"); 
      return; 
      } 
     } 
     else{ 
      alert("wrong combination"); 
      return; 
     } 
     } 
     else{ 
     alert("wrong combination"); 
     return; 
     } 
} 

Answer 1

あなたはこのような何かを持っている場合で参照できるの入力が必要になります（あなたの説明に基づいて）：

<input type="number" id="digit"><button onclick="checkingcombination();">OK</button> 

あなたは次のようなことをすることができます：

var digits=[]; 
function checkingcombination() { 
    var input=document.getElementById("digit"); 
    var digit=input.value; 

    //TODO validate digit 

    //store each digit in the array 
    digits.push(digit); 

    //once there are 4 digits stored, check if the code is valid 
    if(digits.length==4) { 
     var correctAnswer=[4,5,2,7]; 
     if(digits.join("")==correctAnswer.join("")) { 
      alert("lock unlocked, welcome"); 
      return; 
     } else { 
      alert("wrong combination"); 
     } 
     //clear digits to enter a new combination 
     digits=[];     
    } 

    //clear the textbox to enter the next digit 
    input.value=""; 
    input.focus(); 
} 

Answer 2

この方法を試してください。

function checkingcombination (array){ 
    var rightCombo = [4,5,2,7]; 

    for(i = 0; i<userCombo.length; i=++){ 
    if(userCombo[i] !== rightCombo){ 
     alert('"' + userCombo[i] + '" is wrong number!'); 
     return false; 
    } else { 
     alert('Right combo!'); 
     return true; 
    } 
    } 
} 

Answer 3

をあなたがあなたの関数がいくつかの引数を取る持っている必要がありますif文を使用します。 HTMLページの入力から関数に値を渡す必要があります。このようなもの！あなたのhtmlで

function checkingcombination (firstNumber, secondNumber, thirdNumber, fourthNumber) { 
    if(firstNumber == 4){ 
    if(secondNumber == 5){ 
     if(thirdNumber == 2){ 
     if(fourthNumber == 7){ 
      alert("lock unlocked, welcome"); 
     } 
     ... 


var firstNumber = document.getElementById('firstNumber').value; 
var secondNumber = document.getElementById('secondNumber').value; 
var thirdNumber = document.getElementById('thirdNumber').value; 
var fourthNumber = document.getElementById('fourthNumber').value; 


function validate() { 
    checkingcombination(firstNumber, secondNumber, thirdNumber, fourthNumber) 

} 

あなたがそれらのクエリセレクタは、これらのID

<input id="firstNumber" type="number"> 
<input id="secondNumber" type="number"> 
<input id="thirdNumber" type="number"> 
<input id="fourthNumber" type="number" onkeyup="validate()"> 

Answer 4

こんにちは、私の解決策です。

<input type="number" min="0" max="9" class="vault-value" /> 
<input type="number" min="0" max="9" class="vault-value"/> 
<input type="number" min="0" max="9" class="vault-value"/> 
<input type="number" min="0" max="9" class="vault-value"/> 
<button onclick="validateLock()">VALIDATE</button> 

<div> 
    <label>Result: </label> 
    <div id="result"></div> 
</div> 

のjavascript：

var validaCombination = [1,2,3,5]; 
function validateLock(){ 
    var vaultElements = document.getElementsByClassName("vault-value"); 
    var valid = true; 
    for(var i =0; i< vaultElements.length; i++){ 
    var vaultElement = vaultElements[i]; 
    var combinationValue = validaCombination[i]; 
    if(combinationValue !== parseInt(vaultElement.value)){ 
     valid = false; 
    } 
    } 
    valid ? showSuccess() : showError(); 
} 

function showError(){ 
    var resElement = document.getElementById("result"); 
    resElement.innerHTML = "Error!"; 
} 

function showSuccess(){ 
    var resElement = document.getElementById("result"); 
    resElement.innerHTML = "Success!"; 
} 

例： http://codepen.io/xszaboj/pen/NdjLNo?editors=1010

説明：

あなたが入力から値を取得し、それらをvalidaCombination配列をagains一致します。すべての値が一致した場合、それが正しい組み合わせであり、それ以外の場合はエラー

セキュリティアドバイス

である私は、これはちょうど楽しみのプロジェクトではなく深刻なものであると思います。誰もがあなたのコンビネーションを読んで、あなたの「秘密の数字」をチェックできるからです。

Answer 5

このアプリの大規模なセキュリティ上の脆弱性にもかかわらず、私はあなたがそれを無視するように学習しようとしていると仮定しています。

ifステートメントを実行すると、ロジックがtrueであることがチェックされ、trueの場合のみコードが実行されます。基本的に、if文の残りは無視されています。

これを行う別の方法を考えてみましょう。 2つの配列を作成するとします。 1つは実際の組み合わせであり、もう1つは試用版です。あなたの試行が正しい組み合わせと同じ長さに等しい場合にのみ、それだけでそれは機能を実行します。

この関数を実行すると、現在の入力テキストが試用配列に追加され、テキストボックスにテキストがリセットされ、次に試行期間がチェックされてコンボと比較されます。

ボタンを4回クリックすると、メッセージが表示されます。同じでない場合、トライアルアレイはきれいに拭き取られます。

これは、デベロッパーツールを開いて、コンソールのタイプを変数の名前で見て、クリックするたびにその変数を見るのに良い時期です。

HTML

<label for="combo_submit">Enter number:</label> 
<input type="text" id="combo_input"> 
<button type="button" id="combo_button">Click Me!</button> 

Javascriptを

<script> 
    var input = document.getElementById("combo_input"); 
    var button = document.getElementById("combo_button"); 

    var combo = [1,2,3,4]; 
    var trial = []; 

    button.addEventListener("click", checkComboNumber); 

    function checkComboNumber() { 

     var number = Number(input.value); 

     trial.push(number) 

     input.value = ""; 
     input.focus(); 

     if (trial.length === combo.length) { 
      if (combo === trial) { 
       msg = "Well... im impressed"; 
      } else { 
       msg = "Stop trying to guess!"; 
       trial = []; 
      } 
      alert(msg); 
      console.log(msg); 
     } 
    } 


</script>