为什么我的按钮需要点击两次才能切换功能？ JavaScript

Question

我创建了一个带有按钮的网页。当你点击它时，它会从默认的黑色变成粉红色，当你再次点击它时，它会变成紫色。出于某种原因，需要单击两次才能从默认的黑色按钮变为粉红色。请帮我弄清楚如何让它在第一次点击时发生变化（或者如果你知道更好的方法来实现它）

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Events Lab</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    
        <h1 id="changeh1"> Clicking the button will change its color <h1>
        
        <button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
    
<script src="script.js"></script>
    
</body>

</html>

JavaScript


function changeStyle() {


        //sets variable "button" to connect to HTML ID "buttonStyle"
        var button = document.getElementById("buttonStyle"),
            click = false;
            
        button.onclick = function() {
            click = !click;                                     
         
        //toggles background color back and forth between pink and purple when you click button
        button.style.background = click? "#ff0066": "#9933ff";  
         
        //toggles text back and forth between "I am now pink!" and "I am now purple!"
        document.getElementById('buttonStyle').innerHTML = click? 'I am now pink!': 'I am now purple!';
}
}


let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);

CSS

body{
text-align: center;
font-family: Helvetica;
}


button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}

Answer 1

在您的 javascript 中，您编写了以下代码行。

let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);

同样在您的 html 中，您编写了如下代码。

<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>

意思是，当你点击My color will change!按钮时，changeStyle函数会被调用两次。为什么？一个来自 html 代码中定义的事件，另一个来自 javascript 代码中定义的事件。如果您删除 javascript 中的上述 2 个代码行，它将正常工作。或者，您可以删除 html 代码中的 onclick 事件，如下所示：

<button type="button" name="button" id="buttonStyle">My color will change!</button>

Answer 2

您添加了两次 eventListener，一次在 HTML onclick 中，另一次在 Javascript 中使用 addEventListener。

您可以将 Javascript 代码简化如下：

var click = false;
let buttonClick = document.getElementById('buttonStyle');

function changeStyle() {
        click = !click;

        //toggles background color back and forth between pink and purple when you click button
        buttonClick.style.background = click? "#ff0066": "#9933ff";  
         
        //toggles text back and forth between "I am now pink!" and "I am now purple!"
        buttonClick.innerHTML = click? 'I am now pink!': 'I am now purple!';
}

body{
text-align: center;
font-family: Helvetica;
}


button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Events Lab</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    
        <h1 id="changeh1"> Clicking the button will change its color <h1>
        
        <button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
    
<script src="script.js"></script>
    
</body>

</html>

为什么我的按钮需要点击两次才能切换功能？ JavaScript

Why is my button taking two clicks to toggle a function? JavaScript

html

javascript

css

events

onclick