javascript - 我的背景颜色没有随 javascript 改变
问题描述
我将不胜感激,我想我要编写完全错误的代码。我想在单击按钮时更改标题颜色,使其变为蓝色>单击>红色>单击>绿色。到目前为止,我只能实现蓝色>单击>绿色。它从不经过三种颜色。是否有不同的方式来编写 if 语句?还是我不知道的另一种方法可以让我有一些有条件的css样式更改?
var mySwitch = document.getElementById('header').style.background;
if (mySwitch == "darkblue") {
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("header").style.background = "red";
});
}
else if (mySwitch == "red") {
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("header").style.background = "green";
});
}
else {
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("header").style.background = "darkblue";
});
}
* {
margin: 0;
padding: 0;
list-style: none;
font-family: sans-serif;
}
#header {
background: darkblue;
color: white;
display: flex;
justify-content: space-around;
height: 12vh;
}
#header h1 {
text-align: left;
margin-top: 30px;
}
.main-nav ul {
padding: 0px;
font-size: 1.5rem;
display: flex;
margin-top: 40px;
}
.main-nav a {
color: white;
padding: 20px;
text-decoration: none;
}
.main-nav a:hover {
color: rgb(255, 148, 148);
}
.hero-section {
background-image: url("https://stackoverflow.blog/wp-content/uploads/2018/01/BrutalLifeCycleJavascript.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 80vh;
color: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
background: black;
height: 40px;
width: 80px;
color: white;
margin-top: 20px;
animation: jumpbutton 1s ease-out infinite;
outline: none;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="hero-section">
<h1>JAVASCRIPT</h1>
<p id="paragraph">This is a testing environment</p>
<button type="submit" id="myBtn"> CLICK ME </button>
</div>
<div class="about-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, asperiores!</p>
</div>
<!-- CHANGE HEADER COLOR, BACKGROUND & HERO IMAGE-->
<!--- -->
<script src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
解决方案
这是正确的 Javascript:
当我们听到 myBtn 被点击时,我们只需要一个实例,所以我移动了你的所有实例并将它们移到一个中。我还在 Javascript 中声明了颜色,因此您只需单击一次按钮即可激活颜色。
manniL 在这篇文章中给出了更高级的答案!
document.getElementById('header').style.background = "darkblue"; // Declare the initial background color here, so that you don't have to press "Click Me" twice to get it to work!
document.getElementById("myBtn").addEventListener("click", function(){
var mySwitch = document.getElementById('header').style.background;
if (mySwitch == "darkblue") {
document.getElementById("header").style.background = "red";
} else if (mySwitch == "red") {
document.getElementById("header").style.background = "green";
} else {
document.getElementById("header").style.background = "darkblue";
}
});
* {
margin: 0;
padding: 0;
list-style: none;
font-family: sans-serif;
}
#header {
background: darkblue;
color: white;
display: flex;
justify-content: space-around;
height: 12vh;
}
#header h1 {
text-align: left;
margin-top: 30px;
}
.main-nav ul {
padding: 0px;
font-size: 1.5rem;
display: flex;
margin-top: 40px;
}
.main-nav a {
color: white;
padding: 20px;
text-decoration: none;
}
.main-nav a:hover {
color: rgb(255, 148, 148);
}
.hero-section {
background-image: url("https://stackoverflow.blog/wp-content/uploads/2018/01/BrutalLifeCycleJavascript.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 80vh;
color: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
background: black;
height: 40px;
width: 80px;
color: white;
margin-top: 20px;
animation: jumpbutton 1s ease-out infinite;
outline: none;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="hero-section">
<h1>JAVASCRIPT</h1>
<p id="paragraph">This is a testing environment</p>
<button type="submit" id="myBtn"> CLICK ME </button>
</div>
<div class="about-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, asperiores!</p>
</div>
<!-- CHANGE HEADER COLOR, BACKGROUND & HERO IMAGE-->
<!--- -->
<script src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- next.js - window.gtag 在初始加载后不会触发 GA 调用
- javascript - 未定义获取 discord.js node.js
- react-native - React Native Modal 不使用上下文和 redux 显示
- javascript - 为什么当我得到我的数据时似乎未定义/为空?我正在使用 jQuery.post() 从 JS 向 PHP 发送数据
- json - 如何在詹金斯管道中使用invokeLambda的输出?
- python - Python,如何获取组中特定值的计数?
- django - git: 'remote-https' 不是 git 命令。见'git --help'
- python - Python 3:以读取模式打开文件而不引发异常?
- slurm - 在 slurm 中按顺序运行我的代码时如何利用资源?
- vue.js - 在 Ionic 和 Vue.js 中。如何从一个文件中获取或“调用”数据到另一个文件?