使用包含参数的函数更改onclick操作(Change onclick action with a function containing parameters)

编程入门行业动态更新时间:2024-10-28 04:27:50

在我的示例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链接

我已经尝试过这个问题的解决方案

这个：

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

和这个：

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

但它们都不起作用。

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

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

我究竟做错了什么？

In my sample HTML code i got some buttons with a default function to change the text and style on onclick event:

I'm trying to change the onclick event at the end of the default function:

id.onclick= again(this);

But it doesn't work;

This is the jsfiddle link

I've tried solutions in this question and this one

this:

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

and this:

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

but none of them works.

notice that I need this as the parameter to send into the function.

And I need a javascript solution not JQuery

What am I doing wrong?

最满意答案

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

在这一行：

id.onclick = again(this);

您正在调用again函数并将返回值分配给id.onclick 。如果要分配函数， id.onclick = again使用id.onclick = again

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

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";
} 
   button {
  font-size:20px;
  color:#0C6C89;
} 
  <!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> 
  
 
Your code had some syntax errors, id.style.color=#FF0000;, the hex value should be a string. id.style.color="#FF0000"; 
And in this line: 
id.onclick = again(this);
 
You're calling the again function & assigning the return value to id.onclick. If you want to assign a function just use id.onclick = again 
Here's your code working, with some minor modifications.  
 
  
  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";
} 
   button {
  font-size:20px;
  color:#0C6C89;
} 
  <!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>

更多推荐

本文发布于:2023-08-03 03:31:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1383119.html