I am trying to make all classes called (sometags) turn pink once I have an onClickEvent in javascript.
- sometags has to be stored in css
- has to be on click event.
Thank you in advance for the help.
function tag() {
//document.getElementById("tag").onclick = someTags;
document.getElementById("demo").style.color = "pink";
}<style>.someTags {
color: pink;
}
</style><h2 >QUESTIONS:</h2>
<ol>
<li id="questionOne" onm ouseOver="mouseOverQ1()" onm ouseOut="mouseOutQ1()">When 'mouseover' occurs on this question text, the font should become Courier.</li>
<li id="questionTwo">When this text is double-clicked, a red double border 10px wide should appear. When double-clicked again, the border should disappear. (HINT: use rgb(x, y, z) for colours, not words.) Repeated double-clicks toggle between red border and no border.</li>
<li id="questionThree" onclick="changeColor()">When this text is clicked the text should have a blue color. If clicked again, it should go green. Repeated clicks toggle the colour between blue and green.</li>
<li id="questionFour" onm ouseOut="mouseOutQ4()">When 'mouseout' occurs on this text, question 6 should have the text "Nothing to be done here" displayed.</li>
<li id="q5" onclick="questionFive('chartreuse');" >When this text is clicked, the background colour of the webpage becomes 'chartreuse'.</li>
<li id="changeQ4" >Mouseover here will make the text disappear.</li>
<li id="demo" >When this text is clicked, change the background colour to pink of the first and third tags whose css .</li>
</ol>CodePudding user response：
Try This
function pink() {
elements = document.getElementsByClassName('someTags');
for (var i = 0; i < elements.length; i ) {
elements[i].style.backgroundColor="pink";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<title>Document</title>
</head>
<body>
<h2 >QUESTIONS:</h2>
<ol>
<li
id="questionOne"
>
When 'mouseover' occurs on this question text, the font should become
Courier.
</li>
<li id="questionTwo">
When this text is double-clicked, a red double border 10px wide should
appear. When double-clicked again, the border should disappear. (HINT:
use rgb(x, y, z) for colours, not words.) Repeated double-clicks toggle
between red border and no border.
</li>
<li id="questionThree">
When this text is clicked the text should have a blue color. If clicked
again, it should go green. Repeated clicks toggle the colour between
blue and green.
</li>
<li id="questionFour">
When 'mouseout' occurs on this text, question 6 should have the text
"Nothing to be done here" displayed.
</li>
<li id="q5" >
When this text is clicked, the background colour of the webpage becomes
'chartreuse'.
</li>
<li id="changeQ4" >
Mouseover here will make the text disappear.
</li>
<li id="demo" >
When this text is clicked, change the background colour to pink of the
first and third tags whose css .
</li>
</ol>
<button onclick="pink()" >Pink</button>
<script src="app.js"></script>
</body>
</html>CodePudding user response：
Here isa solution that i think can help.
const classElements = document.querySelectorAll(".someTags");
const btnDemo = document.getElementById("demo");
btnDemo.addEventListener('click', () =>
{
classElements.forEach(element => element.classList.add("green"));
}); .green {
background-color: pink;
}<h2 >QUESTIONS:</h2>
<ol>
<li id="questionOne" onm ouseOver="" onm ouseOut="">When 'mouseover' occurs on this question text, the font should become Courier.</li>
<li id="questionTwo">When this text is double-clicked, a red double border 10px wide should appear. When double-clicked again, the border should disappear. (HINT: use rgb(x, y, z) for colours, not words.) Repeated double-clicks toggle between red border and no border.</li>
<li id="questionThree" onclick="changeColor()">When this text is clicked the text should have a blue color. If clicked again, it should go green. Repeated clicks toggle the colour between blue and green.</li>
<li id="questionFour" onm ouseOut="">When 'mouseout' occurs on this text, question 6 should have the text "Nothing to be done here" displayed.</li>
<li id="q5" onclick="questionFive('chartreuse');" >When this text is clicked, the background colour of the webpage becomes 'chartreuse'.</li>
<li id="changeQ4" >Mouseover here will make the text disappear.</li>
<button id="demo" >Button to click.</button>
</ol>