Question

在我的示例HTML代码中，我得到了一些带有默认功能的按钮，用于更改onclick事件的文本和样式：

<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>

<script>
function changeText(id) {
    id.innerHTML = "Ouch!";
    id.style.color="red";
    id.onclick= again(this);
}

function again(id) {
    id.innerHTML = "Again!";
    id.style.color=#FF0000;
}
</script>

我试图在默认功能结束时更改onclick事件：

id.onclick= again(this);

但它不起作用;

这是jsfiddle link

我已在this question和this one

中尝试了解决方案

这样：

 id.onclick = function(this) { id.innerHTML = "Again!"; id.style.color=#FF0000; }

和此：

 id.setAttribute( "onclick", "javascript: again(this);" );

但它们都不起作用。

注意我需要this作为发送到函数的参数。

我需要一个javascript解决方案而不是JQuery

我做错了什么？

Answer 1

您的代码有一些语法错误id.style.color=#FF0000;，十六进制值应该是一个字符串。 id.style.color="#FF0000";

在这一行：

id.onclick = again(this);

您正在调用again功能＆amp;将返回值分配给id.onclick。如果要分配功能，请使用id.onclick = again

您的代码在这里工作，稍作修改。

＆＃13;

function changeText(element) {
    element.innerHTML = "Ouch!";
    element.style.color="red";
    element.onclick = again; //Assign "again" function.
}

function again() {
    //this is the clicked element.
    this.innerHTML = "Again!";
    this.style.color="#FF0000";
}

＆＃13;

 button {
  font-size:20px;
  color:#0C6C89;
}

＆＃13;

<!DOCTYPE html>
<body>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
<button onclick="changeText(this)">Hit Me!</button><br>
</body>

＆＃13;

Answer 2

尝试以下方法：

id.onclick= function onclick(event){again(this);}

Answer 3

如果你需要低耦合，你可以这样做：

function changeText(id) {
    id.innerHTML = "Ouch!";
    id.style.color= "red";
    // send the id
    id.onclick= again(id);
}

function again(id) {
    id.innerHTML = "Again!";
    id.style.color = "#FF0000";
}

使用包含参数的函数更改onclick操作

3 个答案: