仅当脚本在索引中时，暗模式脚本才有效
Posted
技术标签:
【中文标题】仅当脚本在索引中时，暗模式脚本才有效【英文标题】：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"
【问题讨论】：
您在控制台中看到任何错误吗？ 你的其他页面是什么？ 两个页面是否包含相同的样式表？ 控制台没有错误。 是的，它们有相同的样式表 【参考方案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>
【讨论】：
以上是关于仅当脚本在索引中时，暗模式脚本才有效的主要内容，如果未能解决你的问题，请参考以下文章
如何在 WKWebView 中注入多个用户脚本以获得暗模式效果？
PHP - 仅当余数为 0 时才执行（和回显）操作 - 进入无限循环