I am trying to make all classes called (sometags) turn pink once I have an onClickEvent in javascript.
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 class="someTags">QUESTIONS:</h2>
<ol>
<li id="questionOne" onMouseOver="mouseOverQ1()" onMouseOut="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" onMouseOut="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');" class="someTags">When this text is clicked, the background colour of the webpage becomes 'chartreuse'.</li>
<li id="changeQ4" class="question6" class="someTags">Mouseover here will make the text disappear.</li>
<li id="demo" class="someTags">When this text is clicked, change the background colour to pink of the first and third tags whose css class="someTags".</li>
</ol>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 class="someTags">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" class="someTags">
When this text is clicked, the background colour of the webpage becomes
'chartreuse'.
</li>
<li id="changeQ4" class="question6" class="someTags">
Mouseover here will make the text disappear.
</li>
<li id="demo" class="someTags">
When this text is clicked, change the background colour to pink of the
first and third tags whose css class="someTags".
</li>
</ol>
<button onclick="pink()" class="someTags">Pink</button>
<script src="app.js"></script>
</body>
</html>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 class="someTags">QUESTIONS:</h2>
<ol>
<li id="questionOne" onMouseOver="" onMouseOut="">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" onMouseOut="">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');" class="someTags">When this text is clicked, the background colour of the webpage becomes 'chartreuse'.</li>
<li id="changeQ4" class="question6" class="someTags">Mouseover here will make the text disappear.</li>
<button id="demo" class="someTags">Button to click.</button>
</ol>