谁能弄清楚为什么我的 div 上的 addEventListener 不起作用？答案

【问题标题】：Can anyone figure out why addEventListener on my div is not working?谁能弄清楚为什么我的 div 上的 addEventListener 不起作用？
【发布时间】：2019-05-25 15:14:26
【问题描述】：

我正在尝试将侦听器添加到像 div 这样的小按钮，这样我最终可以在单击后更改颜色，而无需出于不同原因使用实际按钮。我在这里看到很多人说它有效或应该有效。有什么我想念的还是不可能的？只是在寻找答案！

这很简单，我已经验证了该按钮具有相同的功能。

//this is the entire js page at the moment
var WorkingOutManager = (function () {

    this.setCounter = 1;
    this.workoutCounter = 1;

    this.workoutID = "workout" + workoutCounter + "_set" + setCounter;

    this.changeState = () => {
        //I will eventually add the code to change the state of the div
        console.log(this.workoutID);
    }

    this.currentSetButton = document.getElementById(this.workoutID).
    this.currentSetButton.addEventListener("click", this.changeState);

    return {
        changeState: changeState
    }

})();

<body>
    <div id="banner">
        <a id="banner_text_link" href="../content/home.html">Work It Out</a>
    </div>
        <div id="wrapper">
            <div>
                <img id="page_image"
                    onclick="window.location.href='../content/home.html'"
                    src="../images/work_it_out_logo_workouts.png" alt="Work It
                    Out logo">
            </div>
            <!--Eventually, Display a Timer after pressing start -->
            <div id="current_workout">
                <div class="workout_exercise">
                    <div class="set_name">Pushups</div>
                    <div onclick="WorkingOutManager.changeState()"
                        class="set_exercise" id="workout1_set1">15</div>
                    <div class="set_exercise" id="workout1_set2">15</div>
                    <div class="set_exercise" id="workout1_set3">15</div>
                    <div class="set_exercise" id="workout1_set4">15</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Situps</div>
                    <div class="set_exercise" id="workout2_set1">TF</div>
                    <div class="set_exercise" id="workout2_set2">TF</div>
                    <div class="set_exercise" id="workout2_set3">TF</div>
                    <div class="set_exercise" id="workout2_set4">TF</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Pullups</div>
                    <div class="set_exercise" id="workout3_set1">TF</div>
                    <div class="set_exercise" id="workout3_set2">TF</div>
                    <div class="set_exercise" id="workout3_set3">TF</div>
                    <div class="set_exercise" id="workout3_set4">TF</div>
                </div>
                <button onclick="WorkingOutManager.changeState()"
                    id="add_exercise">COMPLETE WORKOUT</button>
            </div>
        </div>
    <script src="../scripts/working_out.js"></script>
</body>


#current_workout {
    color: rgb(48, 48, 48);
    width: 100%;
    height: auto;
}

.workout_exercise {
    background-color: #c4c4c4;
    height: 3rem;
    width: auto;
    align-content: center;
}

.set_name {
    color: #fafafa;
    float: left;
    height: 100%;
    padding: 0 0.2rem;
    width: calc(30% - 0.4rem);
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #c4c4c4;
    font-size: 1.6rem;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.set_exercise {
    float: right;
    width: calc(calc(70% / 4) - 0.2rem);
    height: 100%;
    padding: 0 0.1rem;
    margin: 0 0.1rem;
    border-radius: 50%;
    /* transform: rotate(-25deg);
    text-transform: rotate(25deg); */
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #fafafa;
}

当我使用 onClick 侦听器单击 div 时，我没有收到任何错误消息。事实上，什么都没有发生。 “current_workout”div 底部的按钮可以正常工作并记录格式正确的“workoutID”。

【问题讨论】：

标签： javascript html function addeventlistener

【解决方案1】：

如果我更改 '.' 它对我有用在这一行的末尾加一个分号：

this.currentSetButton = document.getElementById(this.workoutID).

因为您在.set_exercise 上使用float: right，所以这些项目是从右到左而不是从左到右列出的。可点击项目workout1_set1 位于行的右端，而不是左侧。我的猜测是你一直在点击错误的项目。我已经调整了你的 css 以突出显示下面 sn-p 中的可点击项目。

（处理程序触发了两次，因为您在 div 上还有一个 onclick 属性。）

FWIW——我不会告诉你如何做你的事情——但我认为没有充分的理由在此处（或任何地方，永远，真的）使用 float。您可以使用 flexbox、网格或表格来实现这种布局，并避免浮动带来的所有麻烦。（我通常不提倡使用表格，但有人可能会争辩说这是一张表格。）

var WorkingOutManager = (function () {

    this.setCounter = 1;
    this.workoutCounter = 1;

    this.workoutID = "workout" + workoutCounter + "_set" + setCounter;

    this.changeState = () => {
        //I will eventually add the code to change the state of the div
        console.log(this.workoutID);
    }

    this.currentSetButton = document.getElementById(this.workoutID);
    this.currentSetButton.addEventListener("click", this.changeState);

    return {
        changeState: changeState
    }

})();

#current_workout {
    color: rgb(48, 48, 48);
    width: 100%;
    height: auto;
}

.workout_exercise {
    background-color: #c4c4c4;
    height: 3rem;
    width: auto;
    align-content: center;
}

.set_name {
    color: #fafafa;
    float: left;
    height: 100%;
    padding: 0 0.2rem;
    width: calc(30% - 0.4rem);
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #c4c4c4;
    font-size: 1.6rem;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.set_exercise {
    float: right;
    width: calc(calc(70% / 4) - 0.2rem);
    height: 100%;
    padding: 0 0.1rem;
    margin: 0 0.1rem;
    border-radius: 50%;
    /* transform: rotate(-25deg);
    text-transform: rotate(25deg); */
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #fafafa;
}

#workout1_set1 {
  background: red;
  color: white;
  font-weight: bold;
}

<div id="banner">
        <a id="banner_text_link" href="../content/home.html">Work It Out</a>
    </div>
        <div id="wrapper">
            <div>
                <img id="page_image"
                    onclick="window.location.href='../content/home.html'"
                    src="../images/work_it_out_logo_workouts.png" alt="Work It
                    Out logo">
            </div>
            <!--Eventually, Display a Timer after pressing start -->
            <div id="current_workout">
                <div class="workout_exercise">
                    <div class="set_name">Pushups</div>
                    <div onclick="WorkingOutManager.changeState()"
                        class="set_exercise" id="workout1_set1">15</div>
                    <div class="set_exercise" id="workout1_set2">15</div>
                    <div class="set_exercise" id="workout1_set3">15</div>
                    <div class="set_exercise" id="workout1_set4">15</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Situps</div>
                    <div class="set_exercise" id="workout2_set1">TF</div>
                    <div class="set_exercise" id="workout2_set2">TF</div>
                    <div class="set_exercise" id="workout2_set3">TF</div>
                    <div class="set_exercise" id="workout2_set4">TF</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Pullups</div>
                    <div class="set_exercise" id="workout3_set1">TF</div>
                    <div class="set_exercise" id="workout3_set2">TF</div>
                    <div class="set_exercise" id="workout3_set3">TF</div>
                    <div class="set_exercise" id="workout3_set4">TF</div>
                </div>
                <button onclick="WorkingOutManager.changeState()"
                    id="add_exercise">COMPLETE WORKOUT</button>
            </div>
        </div>

【讨论】：