單擊窗口/另一個元素時如何更改所有元素的顏色？

Question

我正在創建一個網頁，頂部列出了所有內容標題。 當用戶點擊其中的每一個時，網頁的相關部分應變為藍色。 但是，事實並非如此。 我的 javascript 一定有問題。 初始名單：

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

頁面內容：

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

到目前為止，我擁有的 javascript：

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

當您調用 window.onClick 時，看起來您正在執行function {}而不是function(){} 。 如果可能的話，你應該嘗試使用它

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

Answer 2

如何制作一個“黑色” function 而不是window.onclick並在將顏色設置為藍色之前調用它？

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

並在每個 div 的 onclick function 中調用它（以下示例之一）：

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

哦，我剛剛意識到你想在其他任何地方點擊以使 div 變黑，所以保留window.onclick - 只需讓它調用black() 。