Variable nicht inkrementieren, wie ich möchte, wenn html-Taste geklickt

Ich versuche, eine Schaltfläche zu erstellen, die, wenn gedrückt wird eine Liste von Autos, die ich mag (nur üben) und dann mit diesem Display Bilder der genannten Autos angezeigt. Wenn die Taste ein zweites Mal oder länger gedrückt wird, möchte ich sie ein- und ausschalten.Variable nicht inkrementieren, wie ich möchte, wenn html-Taste geklickt

Wenn ich versuche, es auszuführen, zeigt das Konsolenprotokoll, dass die Variable inkrementiert, aber nicht in einer Weise, die ich erwarten würde. Dies sind zwei verschiedene Wege, die ich versucht habe. Ich habe einige andere Wege ausprobiert, aber ich kann mich nicht erinnern, was genau ich getan habe.

Ich habe ein Bild mit dem Code und den Konsolenprotokoll-Berichten, aber da ich bisher noch keinen Bericht auf dieser Seite habe, kann ich nicht mehrere Bilder posten, also werde ich eine verkürzte Version zusammen mit dem folgenden Code posten:

code with result

Und der Code:

function counter() 
{ 
    //clickCount += 1; 
    console.log(clickCount + " before"); 
    return clickCount += 1; 
} 

function displayImages() 
{ 
    //console.log(clickCount); 
    if(counter() % 2 === 1) // if the click count is an odd number 
    { 
     console.log(clickCount); 
     console.log("make images visible"); 
    } 
    else // otherwise, hide the images. 
    { 
     console.log("make images hidden"); 
    } 
}

getrennt:

function counter() { 
    clickCount += 1; 
    console.log(clickCount + " before"); 
    return clickCount; 
} 

function displayImages() 
{ 
    //console.log(clickCount); 
    if(counter() % 2 === 1) // if the click count is an odd number 
    { 
     console.log(clickCount); 
     console.log("make images visible"); 
    } 
    else if(counter() % 2 !== 1)// otherwise, hide the images. 
    { 
     console.log("make images hidden"); 
    } 
}

die HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 

     <p id="changeParagraph" onclick="changeColour(), changeText()">If you click this, the paragraph and text colour will change.<br /></p> 
     <p id="favouriteCars">Click me to see my favourite cars!</p> 
     <button type="button" id="clickMe" onclick="displayImages(), counter()">Click me</button> 
     <button onclick="counter()">try it</button> 

     <img src="https://i.wheelsage.org/pictures/subaru/impreza/autowp.ru_subaru_impreza_wrc_17.jpg" id="cars" style="display: none;"/> 
     <img src="http://farm8.staticflickr.com/7009/6446244541_e165af10bc_o.jpg" id="cars" style="display: none;" /> 
     <img src="http://www.zastavki.com/pictures/originals/2015/Auto___Mitsubishi_White_sports_Mitsubishi_Lancer_Evolution_IX_097719_.jpg" id="cars" style="display: none;" /> 

     <link rel="stylesheet" href="StyleSheet.css" /> 
     <script type="text/javascript" src="JavaScript.js"></script> 

    </body> 
</html>

Wenn jemand, dass würde geschätzt helfen könnte. Entschuldigung, wenn ich gegen eine der Regeln verstoßen habe oder wenn du dupliziert hast, habe ich versucht, nach etwas Ähnlichem zu suchen, konnte aber keine Informationen finden.

Mit freundlichen Grüßen

Quelle

2016-05-17 Shane O' Shea

Sie Inkrementieren 'clickCount', aber du definierst diese Variable nie irgendwo ' – adeneo

Ja, tut mir leid, ich war sh Oder ich habe vergessen, hinzuzufügen, dass ich das am Anfang der Datei als globale Variable habe. var clickCount = 0; –

Der einzige klare Unterschied, den ich zwischen zwei Implementierungen zu sehen ist, dass Sie mit ‚1‘ in Ihrem ersten Codeblock und ‚0‘ in der zweiten gestartet. Diese

ist, weil der erste Codeblock clickCount abmeldet, bevor es die Inkrementierung gibt

Quelle

2016-05-17 01:00:27

Ihre Taste ruft beide displayImages()undcounter() auf dieser Linie:

<button type="button" id="clickMe" onclick="displayImages(), counter()">Click me</button>

aber Ihre displayImages() Funktion aufruft counter() auch:

if(counter() % 2 === 1) // if the click count is an odd number

Da counter() den Zähler bei jedem Aufruf inkrementiert, wird er zweimal pro Tastenklick inkrementiert. Dreimal mit Ihrer zweiten Version, die einen zusätzlichen Anruf auf dieser Leitung zu counter() hat:

else if(counter() % 2 !== 1)// otherwise, hide the images.

Da Sie mit nur zwei Zuständen (Autos sichtbar oder versteckt) arbeiten, es wäre wahrscheinlich besser, zu verwenden, um eine bool Variable und schalte es um, anstatt einen Zähler zu verwenden.

var carsVisible = false; // initially invisible 

function toggleImages() 
{ 
    if(carsVisible) // if the cars are currently visible, hide them 
    { 
     console.log("make images hidden"); 
     carsVisible = false; 
    } 
    else // otherwise, show the images. 
    { 
     console.log("make images visible"); 
     carsVisible = true 
    } 
}

Und Ihre Taste:

<button type="button" id="clickMe" onclick="toggleImages()">Click me</button>

Quelle

2016-05-17 01:06:27 Mirisong

Sie können mit einfachen Code gleiche erreichen (Ich denke, das ist, was Sie zu tun versuchen)

var show = false; 

function toggle() { 
    show = !show 
    displayImages() 
} 

function displayImages() { 
    if (show) { 
    console.log('WOW nice Pictures!') 
    } else { 
    console.log('Where did they go???') 
    } 
} 

toggle() 
// logs 'WOW nice Pictures!' 
toggle() 
// logs 'Where did they go???'

immer Variablen deklarieren, ist es gut Übung und andere Dinge, siehe hier declaring variables optional?

var show = falsch

wenn Toggle heißt es zeigen zum Gegenteil dessen, was sie allerdings die nicht-Operator (!) Zur Zeit ist so

wenn Show wahr ist! Show ist falsch und umgekehrt

if-Anweisungen gesetzt werden sucht nach einem boolean (false, true)

so in dem Fall, dass = true zeigen if (Show) ist das gleiche wie wenn (Show === true)

Quelle

2016-05-17 01:28:12

Hiya, danke für die Antwort. Dies könnte das Problem lösen, aber es wäre großartig, wenn Sie eine kurze Erklärung hinzufügen könnten, was anders ist, und warum - vergessen Sie nicht, dass viele Neulinge zu Stack Overflow kommen und was für Sie offensichtlich nicht wahr ist sei so für sie. :) –

Variable nicht inkrementieren, wie ich möchte, wenn html-Taste geklickt

Antwort

Verwandte Themen