2017-01-22 26 views
0

Ich mache ein digitales Tresorschloss mit Javascript, wo Benutzer vier Zahlen in der richtigen Reihenfolge ausfüllen müssen, um etwas auf der Seite zu entsperren.So überprüfen Sie eine Reihe von Zahlen in Javascript

Die Seite besteht aus einem Textfeld, wo sie eine Zahl unter 10 ausfüllen und einen Knopf drücken, um die Nummer zu senden. Sie müssen dies 4 Mal tun und wenn die Zahlen und die Reihenfolge korrekt sind (zum Beispiel 4 5 2 7), wird es entsperrt und ein Bild wird angezeigt.

Ich habe versucht, es mit einer "Wenn" -Struktur arbeiten zu lassen, aber ich kann nicht den richtigen Weg finden, dies zu tun.

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; 
     } 
} 
+1

Wann wird 'if (numberpushed == 4) {if (numberpushed == 5) {...}}' jemals passieren? –

+0

Sie wollen es wahrscheinlich nicht mit if-Anweisungen tun. Denken Sie an eine for-Schleife – Isaac

+0

'numberpushed' ist Morphing ... –

Antwort

0

Wenn Sie so etwas wie dieses haben (basierend auf Ihrer Beschreibung):

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

Sie könnten so etwas tun:

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(); 
} 
+0

Sie sind ein Lebensretter, das war genau das, was ich brauchte. Ich mache dies mit arduino Hardware und node.js und ich habe einfach nicht die grundlegenden Programmierkenntnisse, um damit zu kommen. Aber es funktioniert dank dir, ich kann jetzt mit meiner Hand und einem Ultraschallsensor etwas in meinem Browser freischalten. Das hat mir eine schlaflose Nacht gerettet! Danke auch an all die anderen, aber weil ich dies mit einem Ultraschallsensor mache, werden die meisten dieser Wege nicht funktionieren. –

0

Versuchen Sie dieses:

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; 
    } 
    } 
} 
0

Wenn Sie verwenden möchten, wenn Anweisungen, die Sie benötigen, um Ihre Funktion haben einige Argumente. Sie müssen die Werte von den Eingaben auf der HTML-Seite in die Funktion übernehmen. Etwas wie das!

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) 

} 

in Ihrem HTML Sie werden Eingaben benötigen, die diese Abfrage Selektoren durch diese IDs verweisen können

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

Hallo hier ist meine Lösung.

<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!"; 
} 

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

Erläuterung:

Sie nehmen die Werte von Eingaben und passen sie den validaCombination Array agains. Wenn alle Werte übereinstimmen, ist es die richtige Kombination sonst ist es Fehler

Sicherheitshinweis

Ich hoffe, dass dies nur ein Spaß-Projekt ist und nicht etwas ernster. Denn jeder kann Ihre Kombination lesen und Ihre "geheimen Zahlen" überprüfen.

0

Trotz der massiven Sicherheitsschwäche dieser App gehe ich davon aus, dass Sie nur versuchen zu lernen, also werde ich das ignorieren.

Wenn Sie eine if-Anweisung ausführen, überprüft sie, ob die Logik wahr ist, und führt den Code NUR dann aus, wenn sie wahr ist. Im Grunde werden die restlichen if-Anweisungen ignoriert.

Lassen Sie uns einen anderen Weg vorstellen, dies zu tun. Sagen wir, Sie erstellen 2 Arrays. Einer ist die tatsächliche Kombination und der andere ist der Versuch. Nur wenn Ihre Probe gleich lang ist wie die richtige Kombination, dann und nur dann wird eine Funktion ausgeführt.

Wenn die Funktion ausgeführt wird, fügt sie Ihren aktuellen Eingabetext an das Testarray an, setzt den Text in das Textfeld zurück und überprüft als nächstes die Länge der Testversion und vergleicht sie mit der Combo.

Sie müssen den Knopf 4 mal klicken und Sie erhalten eine Nachricht. Wenn dies nicht der Fall ist, wird das Testfeld gelöscht.

Dies wäre ein guter Zeitpunkt, um Ihre Entwicklerwerkzeuge zu öffnen und in der Konsole den Namen Ihrer Variablen einzutippen und sie bei jedem Klicken zu betrachten.

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> 
Verwandte Themen