单击窗口/另一个元素时如何更改所有元素的颜色？

Question

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"
            }

Answer 1

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) {
});

Answer 2

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() .