Change onclick action with a function containing parameters

Question

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

<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>

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?

Marcos Casagrande · Accepted Answer · 2016-01-31 18:47:28Z

0

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>

edited Jan 31, 2016 at 18:47

answered Jan 31, 2016 at 18:34

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ghasem Over a year ago

Thanks. the minor changes were important ones which I didn't know about.

Felipe · Accepted Answer · 2016-10-27 21:58:51Z

0

Try the following:

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

edited Oct 27, 2016 at 21:58

user6655984

answered Oct 27, 2016 at 21:25

Felipe

1

Comments

dexhering · Accepted Answer · 2016-01-31 18:38:57Z

-1

If you need lowcoupling you could do this:

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";
}

answered Jan 31, 2016 at 18:38

dexhering

4224 silver badges13 bronze badges

1 Comment

Marcos Casagrande Over a year ago

You're calling again function, you're not assigning again to onclick, you're assigning its return value.

Collectives™ on Stack Overflow

Change onclick action with a function containing parameters

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related