javascript - 谁能弄清楚为什么我的 div 上的 addEventListener 不起作用？-6ren

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

转载作者：行者123 更新时间：2023-11-28 00:35:56

我正在尝试向像 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”。

最佳答案

如果我更改“.”，它对我有用。在此行的末尾添加一个分号:

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

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

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

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

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>

关于javascript - 谁能弄清楚为什么我的 div 上的 addEventListener 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56301649/

文章推荐： html - 为什么我不能让容器幻灯片只响应图像

文章推荐： javascript - 仅在数据表中根据第一列的下拉值过滤表数据

文章推荐： c++ - 在分配对象时保持常量

文章推荐： javascript - 循环和函数

html - 弄清楚 % 混淆的网格布局
我一直在试图理解人们一直在使用的这个网格系统。有时让我觉得自己很蠢。我了解如果您使用无边距的 12 网格系统。第 12 列将是 100%，而第 1 列将约为 8.33333%。我一直在看一些网格系
c - 弄清楚 Unix 中的写入
我们被分配了一个用于系统编程的 ASCII 压缩项目，但我在代码中的某一特定行上遇到了困难。我问了question关于压缩，在处理完纸上示例文件的前十几个字母后，我将数组代码调整到了我的程序中。在
ios - 弄清楚 iOS 模拟器崩溃报告
我正在使用 Appcelerator 框架编写应用程序，但偶尔会发生崩溃。我正在尝试找出导致崩溃的原因，因此我决定查看 iOS 模拟器崩溃报告。当然，这对我来说都是希腊语，但我希望得到一些指导，了解其
c++ - 弄清楚 C++ 集
有人可以给我一些指导或指导我阅读有关 C++ set 对象的优秀教程吗？我有一段这样的简单代码: #include using namespace std; int main() { ch
swift - 弄清楚 Swift 中何时发生上下文切换
老实说，我不知道我的问题是否有解决方案，但我想在 Swift 中捕捉上下文切换发生的时间。我正在想象一个需要很长时间才能完成的功能，例如远程服务器上的写操作，我在想是否有办法了解何时(至少在哪一行)
php - 弄清楚 Yii2 在使用回退时如何找到主题资源
我正在使用 Yii2 并且一直在阅读 theming和 theme inheritance ;但是有一些问题: 考虑以下示例: 'view' => [ 'theme' => [
javascript - 弄清楚 AJAX POST 函数时遇到问题
我尝试使用 AJAX 发布，因为我不想使用提交按钮并在每次单击它时重新加载页面。我正在使用此代码进行 ajax: Ajax loading error, please try again.").sho
node.js - 弄清楚 MongoDB 数据库模型和引用
我正在尝试找出将在 NodeJS 应用程序中使用的 MongoDB 模型的理想设计。该应用程序的设置类似于调查，某些步骤会根据之前的选择提供选项。这是选择和可能性的示例。第 1 级:图案类型:纯色、
node.js - 弄清楚 promise 遭到拒绝的正确方法是什么？
我有一个 API/Express 路由器: router.post("/signup", async function (req, res) { try { var user
java - 通过 Java 弄清楚 Windows 中的系统文件是什么
我注意到 JFileChooser 隐藏了 Windows 系统文件。 hiberfil.sys、pagefile.sys、$Recycle.Bin 等文件、一些无法打开的快捷方式文件夹等... 我可
python - 弄清楚 Django ORM 的问题，查询内部联接的正确方法是什么？
这是我第一次使用 Django，到目前为止，我对这个框架的工作方式印象深刻。我目前正在开发我的第一个应用程序，并正在处理数据库内容，但是，我在弄清楚如何在不运行原始查询的情况下进行内部联接时遇到问题。
objective-c - 弄清楚 TwUI 中的自动调整大小掩码 - 底部边距？
我在自动调整蒙版大小方面遇到了一些问题。这是交易:我正在使用最近发布的 TwUI ，它从 UIKit 中获取了很多，但它在 Mac 上。这就是我为 iOS 和 Mac 标记的原因。因此，我创建了一个底
c - 弄清楚 startpar.c (sysvinit) 在做什么
好吧，这是一个很长的，打起精神来! :) 最近我尝试在启动期间启动一个用 bash 编写的看门狗脚本。所以我在 rc.local 中添加了一行，其中包含以下内容: su someuser -c "/h
visual-studio - 弄清楚 Visual Studio 使用的 Windows SDK
我在我的机器上安装了多个版本的 Windows 软件开发工具包，有趣的是，我的机器上已经安装了一个 Visual studio Installer工具的版本低于近一年前安装的版本: Windows S
html - 使用 Yii 1 我想给我的主菜单一个 css 样式但是不能用 Bootstrap 弄清楚
widget('zii.widgets.CMenu', array( 'items'=>array( array('label'=>'Home', '

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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