can you select a php imported html element with java script?

Question

i am currently trying to add a class to a html element that is imported by php.The php file contains a a tag element

<a class="felt" href="felt.php">Felt Products</a>

i can not see the class being added, why is this? can js not effect imported elements?

<?php include 'headtaglinks.html'; ?>  
<script>
 var element = document.getElementsByClassName("felt");
 element.classList.add("my-class");
</script>

if i am being able to add a class to a php imported html element, will the added class stay when clicking on a href link? or will the class stay and be written unless i remove it?

The browser doesn't know or care whether the HTML is static or came from PHP. It works the same. — Barmar, Mar 30 '22 at 03:43
How are you checking if the class was added? You need to use the Elements tab, not View Source. — Barmar, Mar 30 '22 at 03:45
`getElementsByClassName` returns a collection of elements. This will work: `element[0].classList.add("my-class");` — Louys Patrice Bessette, Mar 30 '22 at 03:51
For question #2... The browser will navigate to `felt.php`. So, the class won't stay, like the rest of the page anyway. — Louys Patrice Bessette, Mar 30 '22 at 03:56
thankyou Louys Patrice Bessette! the issue seemed to be because i forgot the [0]. — KAZ, Mar 30 '22 at 04:00

score 0 · Answer 1 · answered Mar 30 '22 at 04:42

You're using getElementsByClassName which returns an array.

You need to modify your code to access the first element of the array or use another selector function like querySelector('.felt')

<script>
 var element = document.getElementsByClassName("felt")[0];
 element.classList.add("my-class");
</script>

<script>
 var element = document.querySelector(".felt");
 element.classList.add("my-class");
</script>

can you select a php imported html element with java script?

1 Answers1