提问者:小点点

当窗口/另一个元素被点击时,如何改变所有元素的颜色?


我正在创建一个网页的所有内容标题的列表在顶部。 当用户点击其中的每一个,网页的相关部分应该变成蓝色。 然而,它并没有。 我的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"
            }

共2个答案

匿名用户

调用Window.OnClick时,您执行的似乎是函数{},而不是函数(){}。 如果可能的话,您应该尝试使用此选项

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

匿名用户

制作一个“black”函数而不是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 bq() {
  black();
  document.getElementById("bqdiv").style.color="blue";
}

哦,我刚刚意识到您想要点击其他任何地方来黑化DIV,所以保留window.onclick-只需使其调用black()即可。