变量不递增如何I'我喜欢html按钮点击的时候

Variable not incrementing how I'd like when html button clicked

本文关键字：按钮 html 我喜欢 变量      更新时间：2023-09-26

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

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

我有一张带有代码和控制台日志报告的图片，但由于到目前为止在这个网站上没有任何代表，我无法发布多张图片，所以我将发布一个裁剪版本和下面的代码：

带结果的代码

代码：

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>

如果有人能帮忙，我们将不胜感激。很抱歉，如果我违反了任何规则，或者重复了，我尝试过寻找类似的东西，但找不到任何信息。

亲切问候

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

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

您的按钮正在调用此行上的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>

您可以用更简单的代码实现同样的目的（我认为这就是您正在尝试做的）

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???'

总是声明变量，这是一个很好的实践和其他事情，请参阅此处声明变量可选？

var show=错误

当调用toggle时，它将把show设置为当前的相反方向，尽管不是运算符（！）所以

如果节目是真的！show为false，反之亦然

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

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

相关文章：