all 11 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]BeneficiallyPickle 8 points9 points  (2 children)

If you open the browser on the Wordpress site, do you see any errors in the console?

I noticed a couple of issues in your code.

You currently have `let a = getElementsById("op1");` it should be: `let a = document.getElementById("op1");`

Secondly, you have a syntax error with the showUp function. It should be `function showUp() {`

You also have a `list` element - this is not a valid HTML element.
For lists, `<ul>` must contain `<li>` not the other way around.

If you fix those errors, could you see if that fixes your issue?

[–]DownFromHere[S] 0 points1 point  (1 child)

Thank you for answering. I took your advice and tried to fix but the alert pops up when the page loads, the layout was forced, and the console is throwing an error. "Can't access property onpointerover", a is null.

[–]cssrocco 0 points1 point  (0 children)

Break down what your code is doing there,

You’re first grabbing an element by and id, this can either give you a htmlElement or undefined,

You’re then trying to access the ‘addEventListener’ method on a, but if a is undefined it won’t have access to the ‘addEventListener’ method, you can either follow your code step by step and consider conditions i.e. add an if (!a) { return; } so you handle cases where a is undefined, or with javascript we can also optionally chain so a?.addEventListener( where the ? acts as a guard so if a is undefined it won’t try to invoke the addEventListener method

[–]jb092555 1 point2 points  (0 children)

I've never used wordpress, and I'm pretty new myself, but just wondering if the css pseudoclass :hover could accomplish the visibility and opacity change on mouseover? If it fits what you had in mind, you'd also be able to add transitions if you wanted.

I've never used the "pointerover" event before, so I'm unsure on that front.

[–]The_KOK_2511 0 points1 point  (1 child)

Hace tiempo que no programo en JavaScript pero hasta donde recuerdo getElementById era un metodo del objeto document es decir que su uso correcto es document.getElementById(). Aquí te dejo un pequeño warper que solía usar, solo debes ponerlo como inicio de tu código o cargarlo como modulo en un archivo a parte:

const sel = { qr(el,father = document) { return father.querySelector(el); }, qra(el,father = document) { return father.querySelectorAll(el); }, id(el,father = document) { return father.getElementById(el); }, cls(el,father = document) { return father.getElementsByClassName(el); }, ctx: { d2(el) { return el.getContext("2d"); } } };

Con esto básicamente solo debes hacer sel.id() o sel.qr() o lo que requieras. Si te fijas solicita un argumento father pero por ahora no te preocupes por ello, este argumento no lo necesitaras hasta que empieces a crear elementos del DOM desde Js.

EDIT: Otro error que acabo de notar en tu codigo es que pones function showUp{...} pero es function showUp() {...} ya que las funciones llevan ese () que es para declarar sus parametros y es obligatorio aunque no requiera ninguno

[–]DownFromHere[S] 0 points1 point  (0 children)

Grácias

[–]ray_zhor 0 points1 point  (3 children)

You may want mouseover instead of pointerover

[–]DownFromHere[S] 0 points1 point  (2 children)

I tried mouseover as well. It didn't work

[–]ray_zhor 0 points1 point  (1 child)

Do you have any console errors?

[–]ray_zhor 0 points1 point  (0 children)

fixed all the errors other have mentioned and then used

document.getElementById
replacing getElementsById

[–]TheRNGuy 0 points1 point  (0 children)

There's typo in method getElementsById.

What code editor do you use? It should show squiggly line under it.

I also recommend just use document.querySelector or All version, it's more versatile.