Javascript "wenn" Anweisung funktioniert nicht

Ich bin neu in der Programmierung mit Javascript. Ich habe versucht, diese "if" -Anweisung für eine Stunde zu reparieren. Ich sehe kein Problem damit. Bitte schau und sag mir, was los ist!Javascript "wenn" Anweisung funktioniert nicht

<!DOCTYPE HTML> 
 
    <HTML> 
 
    <body> 
 
    <head> 
 
    <style> 
 
    button { 
 
    \t font-size:14px 
 
    } 
 
    button.hide { 
 
    \t display:none 
 
    } 
 
    </style> 
 
    <title>Candy Box REMAKE</title> 
 
    <script type="text/javascript"> 
 
    var candies = 0; 
 
    function addCandies() { 
 
    \t candies ++; 
 
    \t document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
    }; 
 
    function add10Candies() { 
 
    \t candies += 10; 
 
    \t document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
    }; 
 
    function throwCandies() { 
 
    \t candies -= 10; 
 
    \t document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
    }; 
 
    if (candies >= 30) { 
 
    \t document.getElementById('add10Candies').style.display = "block"; 
 
    }; 
 
    </script> 
 
    <p id="numberOfCandies">You got 0 candy</p> 
 
    <button onclick="addCandies()">Get a candy.</button> 
 
    <button onclick="throwCandies()">Throw 10 candies away. 
 
    <button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button> 
 
    </body> 
 
    </HTML>

So ist dieser Teil:

if (candies >= 30) { 
    document.getElementById('add10Candies').style.display = "block"; 
};

funktioniert nicht (zeige die versteckte Taste), wenn ich genug Süßigkeiten bekommen.

Quelle

2016-12-21 AzDeveloper

Sie müssen dem Code mitteilen, wann die if-Anweisung ausgeführt werden soll. Im Moment läuft es nur einmal, wenn das Skript geladen wird, und Bonbons sind immer 0 an diesem Punkt. – Stu

Ihre fehlende ' 'für die' 10 Süßigkeiten wegwerfen'-Taste – mike510a

Bitte machen Sie eine Funktion, um Ihre innerHTML zu setzen, weil ** DRY **. 'function setHtml (id, neuer Inhalt) {document.getElementById (id) .innerHTML = neuer Inhalt;}' – Martijn

Setzen Sie Ihren Code in einer Funktion:

function checkCandiesQuantity() { 
    if (candies >= 30) { 
     document.getElementById('add10Candies').style.display = "block"; 
    } else { 
     document.getElementById('add10Candies').style.display = "none"; 
    } 
}

Nennen Sie es, wenn Sie die Menge aktualisieren:

function addCandies() { 
    candies ++; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandiesQuantity(); 
}; 

function add10Candies() { 
    candies += 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandiesQuantity(); 
}; 

function throwCandies() { 
    candies -= 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandiesQuantity(); 
};

Quelle

2016-12-21 10:52:35 Mistalis

setzen Sie Ihre if statement in jeder Funktion. Im Moment läuft es nur einmal, wenn die Seite geladen wird.

Quelle

2016-12-21 10:50:31 Hezron

Das Problem ist, dass diese if Überprüfung nur einmal ausgeführt wird, wenn Sie die Seite laden. Eine mögliche Lösung wäre, eine checkCandies() Funktion zu erstellen, die in allen anderen Funktionen aufgerufen:

var candies = 0; 
function addCandies() { 
    candies ++; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandies(); 
}; 
function add10Candies() { 
    candies += 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandies(); 
}; 
function throwCandies() { 
    candies -= 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
    checkCandies(); 
}; 

function checkCandies() { 
    if (candies >= 30) { 
     document.getElementById('add10Candies').style.display = "block"; 
    }; 
}

Quelle

2016-12-21 10:52:22

sollten Sie setzen die if Anweisung in anderen Funktionen, die Bonbons Menge ändern.

function addCandies() { 
    candies ++; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 

    checkCandies(); 
} 

function add10Candies() { 
    candies += 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 

    checkCandies(); 
} 

function throwCandies() { 
    candies -= 10; 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 

    checkCandies(); 
} 

function checkCandies() { 
    if (candies >= 30) { 
     document.getElementById('add10Candies').style.display = "block"; 
    } 
}

Quelle

2016-12-21 10:52:33

Sie müssen diesen Code hinzufügen

if (candies >= 30) { 
    document.getElementById('add10Candies').style.display = "block"; 
};

in jede der Funktionen, die Sie definiert haben.

Was passiert jetzt:

Schritt 1:

var candies = 0;

Schritt 2:

<declarations of functions>

Schritt 3:

if (candies >= 30) { 
    document.getElementById('add10Candies').style.display = "block"; 
};

Nach der Initialisierung und den Funktionsdeklarationen geht das Steuerelement direkt an Ihre if-Bedingung über und seit candies = 0 passiert nichts.

Wenn Sie eine dieser Funktionen aufrufen, wird die Funktion ausgeführt, aber da die if-Bedingung außerhalb der Funktion liegt, wird sie nicht ausgeführt.

Quelle

2016-12-21 10:57:35 mrid

Vielleicht ist eine einfachere Möglichkeit, dies zu schreiben (es gibt auch zunehmende Ebenen von "einfacher"). Verwenden Sie die üblichen Code-Bits, wenn Sie können.

PS: Ich reparierte, was ich ein Grammatikfehler in der Nachricht angenommen:

<script type="text/javascript"> 
var candies = 0; 
function updateCandies() { 
    var e = document.getElementById('numberOfCandies'); 
    e.innerHTML = "You [edit:] have " + candies + " candies."; 
    e.style.display = candies>=30 ? "block" : "none"; 
} 

function addCandies() { 
    candies ++; 
    updateCandies(); 
}; 
function add10Candies() { 
    candies += 10; 
    updateCandies(); 
}; 
function throwCandies() { 
    candies -= 10; 
    updateCandies(); 
}; 
</script>

Quelle

2016-12-21 10:59:41 cmroanirgo

I checkIs30Candies hinzufügen haben() Funktion. haben sich auch geändert Stil style.display = "inline-block" (in Fall ist es Ihnen inline-block sein müssen, nehme ich an)

Und Sie hatten einen Tippfehler

<button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button>

Es sollte Onclick = "add10Candies()", mit Klammern eine Funktion

<!DOCTYPE HTML> 
 
<HTML> 
 
<body> 
 
<head> 
 
<style> 
 
button { 
 
    font-size:14px 
 
} 
 
button.hide { 
 
    display:none 
 
} 
 
</style> 
 
<title>Candy Box REMAKE</title> 
 
<script type="text/javascript"> 
 
var candies = 0; 
 
function checkIs30Candies() { 
 
\t if (candies >= 30) { 
 
\t  document.getElementById('add10Candies').style.display = "inline-block"; 
 
\t } else { 
 
\t \t document.getElementById('add10Candies').style.display = "none"; 
 
\t } 
 
} 
 
function addCandies() { 
 
    candies ++; 
 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
    
 
    checkIs30Candies(); 
 
}; 
 
function add10Candies() { 
 
    candies += 10; 
 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
}; 
 
function throwCandies() { 
 
    candies -= 10; 
 
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; 
 
    
 
    checkIs30Candies(); 
 
}; 
 

 

 
</script> 
 
<p id="numberOfCandies">You got 0 candy</p> 
 
<button onclick="addCandies()">Get a candy.</button> 
 
<button onclick="throwCandies()">Throw 10 candies away. 
 
<button class="hide" id="add10Candies" onclick="add10Candies()">Get 10 candies.</button> 
 
</body> 
 
</HTML>

aufzurufen

Quelle

2016-12-21 11:04:39 Helga

Javascript "wenn" Anweisung funktioniert nicht

Antwort

Verwandte Themen