How to insert html dom events?

Hello everyone!

I am trying to achieve the following. Basically I want to change the attributes of a certain text by clicking on it. Mind you, I’m total beginner at coding but by using a trial-and-error method I got to this working code.

<!DOCTYPE html>
<html>
<body>

<style>
k1 {
    color: black;
}

f1 {
    color: green;
}
</style>

<k1 onclick="changeText(this)">Test Text</k1>

<script>
function changeText(id) {
    id.innerHTML = "<f1> Test Text</f1> ";
}
</script>

</body>
</html>

Here’s how the whole thing looks like at w3schools (http://www.w3schools.com/code/tryit.asp?filename=F0NHVXZJUNG9). That’s really all I need. A text in black and after clicking on it turns green.

My problem is that I can’t figure out how to make this code work now in wordpress. Simply inserting it into the “Text” editor doesn’t work. Any ideas how to insert this code and make it work?

Hi,

There are more ways in which this can be achieved. We won’t explore them much though as this is a theme support forum so we can’t really help you with coding.

I suggest you keep your JS code in a plugin like this one. And your CSS code in this.

After you’ve added your code in those plugin, you only need to add your HTML where you want to display it.
Furthermore:

  • those k1,f1 tags you’re using aren’t valid HTML.
  • you could achieve the same thing with CSS only. Let’s say you have <p class=“testp”>Test text</p>, then you would add in the CSS plugin:

.testp {color: black;}
.testp:active {color: green;}