仅当脚本在索引中时，暗模式脚本才有效答案

【问题标题】：Dark mode script only works if script is in the index仅当脚本在索引中时，暗模式脚本才有效
【发布时间】：2022-01-11 02:06:54
【问题描述】：

我有 2 页，每页都有相同的暗模式按钮代码。索引上的脚本有效，但不同文件中的脚本无效。没有错误。这是不起作用的脚本。

<body id = "body" class = "">
    <h1 id="h1">Learn Chemistry!</h1>

开始技能测试

<form >
  <h3 id="question"></h3>

  <label for = "CO">CO:</label>
  <input type = "text" id = "CO" class='input' autocomplete="off" placeholder="Answer">
  
  <label for = "cb">Cl4Br5:</label>
  <input type = "text" id = "cb" class='input' autocomplete="off" placeholder="Answer">



</form>





 <button id = "check" onclick ="check()">Show answers</button>

<p id='demo'></p>

<form action='coming.html'>
  <button id="next" onclick="next()">next</button>
     </form>


<form action='index.html'>
  <button id = "back" >back</button>
  </form>

这是同一脚本中的暗模式代码。

<button id = "dark-btn" onclick = "darkMode();return false">Dark Mode</button>

<script src="script.js"></script>

这里是Js函数darkmode。（仅适用于索引中的脚本）

const labels=document.getElementsByTagName("labels")
      const answers=document.getElementById("demo");
    const content=document.getElementById("content");
const body = document.getElementById("body");
const heading1 = document.getElementsByTagName("h1")[0];
const heading3 = document.getElementsByTagName("h3")[0];
const buttons = document.getElementsByTagName("button")
const titles = [heading1, heading3,answers]
const time=document.getElementById("time");
const button = document.getElementById("dark-btn");


//  console.log(labels.length);
let dark = false;
function darkMode() {
  if (dark == false){
    
    for (let i = 0; i < buttons.length; i++){
      buttons[i].setAttribute("class", "darks");
    }
   for (let i = 0; i < buttons.length; i++){
      buttons[i].setAttribute("class", "dark-btn");
    }
for (let i = 0; i < labels.length; i++){
      labels[i].setAttribute("class", "dark-txt");
    }
    
    let i = 0;
    while (i < titles.length){
      titles[i].setAttribute("class", "dark-txt");
      i++;
    }
    

    body.setAttribute("class", "dark");
    button.style.backgroundColor = "white";
    button.style.color = "rgb(88, 119, 255)";
time.style.color = "white"
content.style.color="greenyellow"
    dark = true;
    
    

  } else {
    for (let i = 0; i < buttons.length; i++){
      buttons[i].setAttribute("class", "dark-btn");
    }
    
    for (let i = 0; i < buttons.length; i++){
      buttons[i].setAttribute("class", "");
    }
    for (let i = 0; i < labels.length; i++){
     labels[i].setAttribute("class", "");
    }
    
    let i = 0;
    while (i < titles.length){
      titles[i].setAttribute("class", "");
      i++;
    }
    
    body.setAttribute("class", "");
    dark = false;
    button.style.backgroundColor = "rgb(88, 119, 255)";
    button.style.color = "white";
    content.style.color="green"
  }
      
}

【问题讨论】：

您在控制台中看到任何错误吗？
你的其他页面是什么？
两个页面是否包含相同的样式表？
控制台没有错误。
是的，它们有相同的样式表

标签： javascript html darkmode

【解决方案1】：

@约翰这是有效的页面。它在索引中。

<html >
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />




</head>
  <body id = "body" class = "">
<h1 id='h1'>Learn Chemistry!</h1>
<style>
#content{
  color: green;
transform:translate(140px,30px);
line-height:6px;
font-family:sans-serif;
}

</style>
<img id="flask" src="https://www.pinclipart.com/picdir/big/1-11721_color-guard-clip-art.png">
  
  <img id="flasktwo" src="https://www.pinclipart.com/picdir/big/1-11721_color-guard-clip-art.png">

  <button type="button" id="time"
onclick="document.getElementById('date').innerHTML = Date()">
Date and Time.</button>
          <p id="date"></p>
  <form >
      <button id="learn" name="learn"onclick="nextc();return false" >Learn</button>
       
        </form>
        <img class="example" src="c2.png">
        <h3 id="title"></h3>
        <p id="content"></p>

<button id="next" name="hi" onclick="nextc();return false" >Next</button>

       

<button id = "dark-btn" onclick = "darkMode();return false">Dark Mode</button>

 <p id='demo'></p>


<!-- CONCEPTS -->
<!-- <body id = "body" class = ""> -->
 
    <h3 class="title"></h3>

      <button id="back">back</button>


      <form id='next'  action='q2.html'>
      <button id="nexttwo" name="nexttwo" onclick="next()">Test</button>
        </form>
    <script src="script.js"></script>
  </body>
  </html>

【讨论】：