Question

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

这非常简单，我已经验证了按钮可以使用相同的功能。

-WhatIf

-WhatIf

-WhatIf

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

Answer 1

如果我更改“。”，它将对我有用。在此行的末尾转为分号：

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

由于您在float: right上使用.set_exercise，因此这些项目从右至左而不是从左至右列出。可点击的项目workout1_set1位于该行的右端，而不是左侧。我的猜测是您单击的项目错误。我已经调整了您的CSS，以突出显示以下代码段中的可点击项。

（处理程序将触发两次，因为您在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>

谁能弄清楚为什么我的div上的addEventListener无法正常工作？

1 个答案: