Onclick function "is not defined"

Question

I am fairly new to wordpress and am trying to define and call a function but cannot get it to work.

The following code appears in a php file that is called from the content.php file using get_template_part.

<div onclick="checkAllTopicCheckBoxes()"> </div>

I added the following code to the bottom of the function.php file:

function checkAllTopicCheckBoxes() {
    alert("Hello! I am an alert box!!");
}

When I click the element it returns:

(index):363 Uncaught ReferenceError: checkAllTopicCheckBoxes is not defined.

Can anyone please help me?

Solution 1

Using OnClick or similar attributes is very poor practice.

Using Javascript Event Listener is a much better way of doing this. Registering an event in a modern way is the unobtrusive way of handling events. Also to register more than one event listener for the target you can call addEventListener() for the same target.

HTML:

<div id="checkAllTopicCheckBoxes"> </div>

Your JavaScript is supposed to look like this:

document.getElementById ("checkAllTopicCheckBoxes").addEventListener ("click", myFunction, false);

function myFunction() {
  alert("Hello! I am an alert box!!");
}

HTML attribute (such as Onclick) should be avoided as it concerns the content/structure and behavior are not well-separated, making a bug harder to find.

Solution 2

What you wrote is a Javascript function, it must be surrounded by in HTML code. Have you written your function in something like:

echo('<script>function checkAllTopicCheckBoxes() { alert("Hello! I am an alert box!!");}</script>');

Also, I think Wordpress must have some function ready to use to add scripts. Try to have a look on wp_enqueue_script (string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false);

edit: I just found that question, it may answer yours: How to write a Javascript function inside the functions.php of Wordpress?

Solution 3

I faced the same error like you.

If we use the onclick html attribute, we need to define that onclick function within the same html element (by using tags).

It is best practice to create click event listener using javascript/jquery, than using onclick html attribute.

Comments

[TylerH]

@srMarquinho please do not switch US English spellings to UK English or vice versa.

[eaglei22]

How is the bug harder to find? To me, if I can use the, "Inspect Element" and debug by clicking the element.. then I can see easiest the function attached to the onclick. Go to the code, and perform a search for that function name, and there I am... Not sure why many say using onClick is bad practice.

[Brackets]

Does not answer the question

[JamesHoux]

People who automatically claim "onclick=" is bad practice... are like people who have an allergic reaction if you mention the "static" keyword in OOP. They are entrenched in opinions taken as gospel, even though functional programming has shown that their opinions are arguably wrong and context is everything. Don't be deceived by programming paradigm zealots.

[Tom Baxter]

So what? the OP is not asking about best practices.

[Rogério]

This answer is helpful, but the opinion that "using onclick" is poor practice is ridiculous. It assumes that the web app will have lots of JS code and can easily register event handlers with addEventListener calls. This is not the case. When you have a conventional web app with HTML generated on the server-side, it's usual to have onclick, etc. everywhere, and no dynamic event handler registration is really needed.

[pigeonburger]

this isn't an answer