CODEWITHSUNDEEP
javascripthtmlcolorsonclickwindow
user13398128
user13398128

Reputation:

How to change the color of all elements when the window/another element is clicked?

I am creating a webpage with a list of all the content headings at the top. When the user clicks of each of these, the related part of the webpage should turn blue. However, it does not. There must be something wrong with my javascript. The initial list:

<h1><u>Quotations!</u></h1>
<ol>Index:
  <li id="bq" onclick="bq()">blockquotes</li>
  <li id="sq" onclick="sq()">Short Quotations</li>
  <li id="a" onclick="a()">Abbreviations</li>
  <li id="ad" onclick="ad()">Addresses</li>
  <li id="c" onclick="c()">Cites</li>
  <li id="bdo" onclick="bdo()">BDOs</li>
</ol>

The contents of the page:

<div id="bqdiv">
  <h5>Blockquotes</h5>
  <blockquote>
    These have indents! They define a section that is quoted from another source.
  </blockquote>
</div>
<div id="sqdiv">
  <h5>Short Quotations (q tag)</h5>
  <p>This is an example: 
    <q>Hello</q>
  </p>
</div>
<div id="a">
  <h5>Abbreviations</h5> 
  <p>These can be <abbr title= "HEYA!">hovered</abbr> over!</p>
</div>
<div id="addiv">
  <h5>Addresses</h5>
  This is an address:
  <address>
    Addresses are in italic <br>
    and browsers always add a break b4 and after the <address></address> element
  </address>
  After the address
</div>
<div id="cdiv">
  <h5>Cites</h5>
  <p>
    <cite>Cites</cite> define the title of something creative, like a painting!<br>
    They are in italic, like this.
  </p>
</div>
<div id="bdodiv">
  <h5>Bi-Directional Override (BDO)</h5>
  <p>It is used to override the text direction, <bdo dir="rtl">like this!</bdo></p>
</div>

The javascript I have so far:

function bq() {
  document.getElementById("bqdiv").style.color="blue";
}
function sq() {
  document.getElementById("sqdiv").style.color="blue"'
}
function ad() {
  document.getElementById("addiv").style.color="blue";
}
function c() {
  document.getElementById("cdiv").style.color="blue";
}
function bdo() {
  document.getElementById("bdodiv").style.color="blue";
}
window.addEventListener("click", function(event)) {
                document.getElementById("bqdiv").style.color="black"
                document.getElementById("sqdiv").style.color="black"
                document.getElementById("addiv").style.color="black"
                document.getElementById("cdiv").style.color="black"
                document.getElementById("bdodiv").style.color="black"
            }

Upvotes: 0

Views: 122

Answers (2)

iAmOren
iAmOren

Reputation: 2804

How about making a "black" function instead of window.onclick and call it before setting color to blue?

function black() {
  document.getElementById("bqdiv").style.color="black";
  document.getElementById("sqdiv").style.color="black";
  document.getElementById("addiv").style.color="black";
  document.getElementById("cdiv").style.color="black";
  document.getElementById("bdodiv").style.color="black";
}

And in each div's onclick function call it (example below on one of them):

function bq() {
  black();
  document.getElementById("bqdiv").style.color="blue";
}

Oh, I just realized you want anywhere else clicked to blacken the divs, so keep window.onclick - just make it call black().

Upvotes: 0

kovuko
kovuko

Reputation: 11

Looks like you're doing function {} instead of function(){} when you call window.onClick. And you should try to use this instead if possible

window.addEventListener("click", function(event) {
});

Upvotes: 1

Related Questions