Question

我试图创建一个按钮，按下该按钮将显示我喜欢的汽车列表（只是练习），然后显示所述汽车的显示图像。如果按下按钮第二次或更多次，那么我希望它能够打开和关闭。

当我尝试运行它时，控制台日志显示变量正在递增但不是我期望的方式。这是我尝试过的两种不同方式。我已经尝试过其他一些方法，但我无法记住我到底做了什么。

我有一个包含代码和控制台日志报告的图片，但由于目前在此网站上没有任何代表，我无法发布多张照片，因此我会发布裁剪版本以及代码下面：

代码：

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

分开：

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

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>

如果任何人可以帮助，那将是值得赞赏的。很抱歉，如果我违反任何规则，或者如果重复，我会尝试寻找类似的东西，但无法找到任何信息。

亲切的问候

Answer 1

我在两个实现之间看到的唯一明显区别是，您在第一个代码块中以“1”开头，在第二个代码块中以“0”开始。

这是因为第一个代码块在返回增量之前注销clickCount

Answer 2

您的按钮正在此行呼叫displayImages() 和 counter()：

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

但您的displayImages()函数也在调用counter()：

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

由于counter()每次调用都会递增计数器，因此每按一次按钮会增加两次。你的第二个版本有三次，在这一行额外拨打counter()：

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

由于您只使用两种状态（汽车可见或隐藏），因此最好使用bool变量并切换它而不是使用计数器。

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

你的按钮：

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

Answer 3

您可以使用更简单的代码完成相同的操作（我认为这就是您要做的事情）

Callback

始终声明变量，这是一个好习惯和其他事情，请参阅此处declaring variables optional?

var show = false

当调用toggle时，它会将show设置为与当前的相反，尽管not运算符（！）所以

如果show为true，则show显示为false，反之亦然

if语句查找布尔值（false，true）

所以在show = true的情况下 if（show）与if（show === true）

相同

变量不会增加我点击html按钮时的方式

3 个答案: