点击功能在加载时运行;未定义函数的未捕获类型错误

Click function runs on load; Uncaught TypError for undefined function

本文关键字：函数 错误 类型 未定义 功能 加载 运行      更新时间：2023-09-26

这是一个简单的脚本，应该使您的文本改变颜色，如果你点击它。然而，当我加载页面时，颜色会自动改变(绕过click事件)，并且控制台在

行上给出此错误"Uncaught TypeError: undefined is not a function"。
allP.addEventListener("click", this.changeSomething(), false);

我的问题是:1)我怎样才能使这个非常简单的脚本工作?2)还有其他关于更好地推进编码的反馈吗?我非常感谢你的指教。

标记:

<P>Lorem</P>
<P>Lorem</P>
Javascript: 

var colorChanger = {
    init : function() {
        this.clickEvent();
    },
    config : {
        myColor: "red"
    },
    clickEvent : function() {
        allP = document.querySelectorAll("p");
        allP.addEventListener("click", this.changeSomething(), false);
    },
    changeSomething: function(myColor) {
        myColor = this.config.myColor;
        $("p").css({
            color: myColor // I know changing CSS in JS is bad practice but this is just for the sake of the exercise
        })
    }
}
$(document).ready(function() {
colorChanger.init();
});

任何反馈都是非常感谢的!

1) addEventListener期望函数作为第二个参数，但您正在传递函数返回的内容(即undefined)。

2)在this.changeSomething中，上下文(this)是window，因为这是在事件上调用的函数的上下文。

改变
allP.addEventListener("click", this.changeSomething(), false);


allP.addEventListener("click", this.changeSomething.bind(this), false);
编辑:

,这…

allP = document.querySelectorAll("p");
allP.addEventListener("click", this.changeSomething(), false);

. .不能工作。您不能像那样访问nodeList中的项。

试试这样写:

allP = document.querySelectorAll("p");
for (var i=0; i<allP.length; i++) {
    allP.item(i).addEventListener("click", this.changeSomething.bind(this), false);
}
相关文章：