Estoy tratando de hacer que todas las clases llamadas (algunas etiquetas) se vuelvan rosadas una vez que tengo un onClickEvent en javascript.
Gracias por adelantado por la ayuda.
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>Prueba esto
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>Aquí hay una solución que creo que puede ayudar.
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>