I've been trying to get my local WordPress site to work with JavaScript, and it's driving me a bit nuts. I'm using the basic CSS & JavaScript toolbox plugin to create a dynamic page. My goal is to change the visibility and opacity of a list element when a user types in a text input. Initially, I switched to using an alert to see if the code would run, but no luck. I even tried it in a practice IDE, and it works fine there, but things are falling apart in WordPress.
I'm using both internal and inline JavaScript, as well as object.event(), but I've got a console error saying that the input object is undefined, so the keyup event doesn't trigger, and the alert shows up when the page loads instead. I'm not sure if it's a problem with my JavaScript, the WordPress setup, or the plugin itself—everything else seems to be functioning well, but the header isn't visible now either. If anyone could help me figure this out, I'd really appreciate it! I've pasted my code below, but please ignore the formatting.
```html
- Show this
let a=document.getElementsById("op1");
a.addEventListener("keyup", showUp);
function showUp{
alert("success!")
}
```
4 Answers
Looks like you have a couple of simple issues in your JavaScript. First, instead of `document.getElementsById("op1")`, you need `document.getElementById("op1")`. Also, your function declaration should have parentheses: `function showUp() {`. These small fixes should help make your code work!
Have you checked what text editor you're using? If you're using a good IDE, it can help catch errors like these right away. It's pretty easy to miss those simple syntax errors if you're not careful!
Your HTML has some issues too. First off, there's no `` element in standard HTML—use an `
- ` instead. Also, when setting up your script, wrap it in a `DOMContentLoaded` event listener to ensure it runs after the DOM is fully loaded. This will help you avoid timing issues with the mouse events!
I scanned your code quickly, and while it seems mostly correct, the problem might be with how WordPress handles JavaScript events. Try setting up a basic local site and see if your mouse functions work there. If they do, it suggests WordPress might be altering the way events are handled. Checking WordPress documentation on mouse event handling could really help!
Haha, just a suggestion—maybe take a closer look next time!
Exactly! Plus, don't forget you have a missing closing tag for the `li` element on your 'Show this' line.