My current project involves writing a script to change the color of text when a specific button is clicked. The idea is that clicking the "Change color1" button triggers the text color change using the following code snippet:
<button onclick="myFunction()">Change color1</button>
This button calls the function:
function myFunction() {
location.reload();
}
Now, I want to achieve the same result with another button called "Change color2," which I have created using CSS. However, I'm unsure how to call the function that reloads the page with this new button.
The method for achieving this with the first button is clear:
<button onclick="myFunction()">Change color1</button>
But with the second button, I'm stuck:
<button class="button button1">Change color2</button>
I attempted:
<button class="myFunction()">Change color2</button>
However, this approach failed. So, I'm looking to resolve this issue efficiently.
My complete code includes HTML, CSS, and JavaScript sections, allowing users to interact with buttons to dynamically change text colors based on predefined keywords.