CODEWITHSUNDEEP
javascripthtmlcss
Mohammad Abedy
Mohammad Abedy

Reputation: 60

toggling innerHTML in Javascript

I want to toggle between two icons by clicking on .switch and apply the style of .nightTextNight to .nightText, my JavaScript code works everywhere except here.

And can anyone suggest me any other way to make it simpler? Because, for every little change I need to create two class and give it an id.

var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");

function nightMode() {
	nightBtn.classList.toggle("switchNight");
	body.classList.toggle("night");
	navbar.classList.toggle("navbarNight");
	nightText.classList.toggle("nightTextNight");
	if(nightText.className = "nightTextNight") {
		nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
	} else {
		nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
	};
}
body {
	background-color: white;
	transition: background-color ease 0.3s;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

.night {
	background-color: #3f4b5e;
	transition: background-color ease 1s;
}

.switch {
	height: 35px;
	width: 35px;
	border-radius: 50%;
	background-color: #092d30;
	border: 3px solid wheat;
	float: right;
	z-index: 4;
	transition: background-color ease 1s;
	margin-top: 12px;
	margin-right: 4px;
	cursor: pointer;
	text-align: center;
	line-height: 17.5px;
	position: relative;
}

.switchNight {
	background-color: wheat;
	border: 3px solid #092d30;
	z-index: 4;
	transition: background-color ease 1s;
}

.textNight {
	color: white;
}

.switch:hover {
	background-color: #4d5e77;
	transition: background-color ease 1s;
}

.switchNight:hover {
	background-color: #fff2d8;
	transition: background-color ease 1s;
}

/* --------------------- NAV BAR ------------------ */

.navbar {
	width: 100%;
	height: auto;
	background: #f4f7f9;
	position: fixed;
	margin-top: 0;
	padding: 0;
	border-bottom: 3px solid #2fb3f9;
}

.navbar li {
	list-style-type: none;
	display: inline;
	height: auto;
}

.navbar li a {
	padding: 20px 25px;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	font-weight: bolder;
	color: #516f7f;
}

.navbar li a:hover {
	color: #ff9d00;
	transition: color ease 0.3s;
}

.navbarNight {
	background-color: #556bb5;
	border-bottom: 3px solid white;
}

.navbarNight li a {
	color: white;
}

.nightText {
	position: absolute;
	color: white;
	font-weight: bolder;
	top: 9px;
	right: 12px;
}

.nightTextNight {
	color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
	<title>Night Mode - TEST</title>
</head>
<body id="body">
	<div id="container">
		<div id="nav">
			<ul id="navbar" class="navbar">
				<li><a href="#">Home</a></li>
				<li><a href="#">About me</a></li>
				<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
			</ul>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

Upvotes: 2

Views: 4375

Answers (4)

ferhado
ferhado

Reputation: 2594

The best way to ignore the id to use an Attribute and loop like data-mode see this example :

	var modes={
	day:{
	      switch:"switch", body:"day", navbar:"navbar",icon:"fa fa-moon-o"
		},
	night:{
	      switch:"switchNight switch", body:"night day", navbar:"navbarNight navbar",icon:"fa fa-sun-o"
	   }
	}
	function changeMode(arg){
		window.mode=arg;
		var elem=document.querySelectorAll('[data-mode]');
		for (var i=0; i<elem.length; i++){
			var key=elem[i].getAttribute("data-mode");
			elem[i].classList=modes[arg][key];
		}

	}
	window.mode="day";
	body {
		background-color: white;
		transition: background-color ease 0.3s;
		padding: 0;
		margin: 0;
		font-family: sans-serif;
	}

	.night {
		background-color: #3f4b5e;
		transition: background-color ease 1s;
	}

	.switch {
		height: 35px;
		width: 35px;
		border-radius: 50%;
		background-color: #092d30;
		border: 3px solid wheat;
		float: right;
		z-index: 4;
		transition: background-color ease 1s;
		margin-top: 12px;
		margin-right: 4px;
		cursor: pointer;
		text-align: center;
		line-height: 17.5px;
		position: relative;
	}

	.switchNight {
		background-color: wheat;
		border: 3px solid #092d30;
		z-index: 4;
		transition: background-color ease 1s;
	}

	.textNight {
		color: white;
	}

	.switch:hover {
		background-color: #4d5e77;
		transition: background-color ease 1s;
	}

	.switchNight:hover {
		background-color: #fff2d8;
		transition: background-color ease 1s;
	}

	/* --------------------- NAV BAR ------------------ */

	.navbar {
		width: 100%;
		height: auto;
		background: #f4f7f9;
		position: fixed;
		margin-top: 0;
		padding: 0;
		border-bottom: 3px solid #2fb3f9;
	}

	.navbar li {
		list-style-type: none;
		display: inline;
		height: auto;
	}

	.navbar li a {
		padding: 20px 25px;
		text-decoration: none;
		display: inline-block;
		font-size: 20px;
		font-weight: bolder;
		color: #516f7f;
	}

	.navbar li a:hover {
		color: #ff9d00;
		transition: color ease 0.3s;
	}

	.navbarNight {
		background-color: #556bb5;
		border-bottom: 3px solid white;
	}

	.navbarNight li a {
		color: white;
	}

	.nightText {
		position: absolute;
		color: white;
		font-weight: bolder;
		top: 9px;
		right: 12px;
	}

	.nightTextNight {
		color: black;
	}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
	<title>Night Mode - TEST</title>
</head>
<body data-mode="body">
	<div>
		<div>
			<ul class="navbar" data-mode="navbar">
				<li><a href="#">Home</a></li>
				<li><a href="#">About me</a></li>
				<li><div class="switch" data-mode="switch" onclick="changeMode(mode=='night'?'day':'night');">
					<span class="nightText">
						<i class="fa fa-moon-o" data-mode="icon"></i>
					</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

Upvotes: 0

MarioZ
MarioZ

Reputation: 997

It wasn't working because you've got two classes:

nightText nightTextNight

So you need to check:

if(nightText.className === "nightText nightTextNight")


var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");

function nightMode() {
	nightBtn.classList.toggle("switchNight");
	body.classList.toggle("night");
	navbar.classList.toggle("navbarNight");
	nightText.classList.toggle("nightTextNight");
	if(nightText.className === "nightText nightTextNight") {
		nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
	} else {
		nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
	};
  console.log(nightText.className);
}
body {
	background-color: white;
	transition: background-color ease 0.3s;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

.night {
	background-color: #3f4b5e;
	transition: background-color ease 1s;
}

.switch {
	height: 35px;
	width: 35px;
	border-radius: 50%;
	background-color: #092d30;
	border: 3px solid wheat;
	float: right;
	z-index: 4;
	transition: background-color ease 1s;
	margin-top: 12px;
	margin-right: 4px;
	cursor: pointer;
	text-align: center;
	line-height: 17.5px;
	position: relative;
}

.switchNight {
	background-color: wheat;
	border: 3px solid #092d30;
	z-index: 4;
	transition: background-color ease 1s;
}

.textNight {
	color: white;
}

.switch:hover {
	background-color: #4d5e77;
	transition: background-color ease 1s;
}

.switchNight:hover {
	background-color: #fff2d8;
	transition: background-color ease 1s;
}

/* --------------------- NAV BAR ------------------ */

.navbar {
	width: 100%;
	height: auto;
	background: #f4f7f9;
	position: fixed;
	margin-top: 0;
	padding: 0;
	border-bottom: 3px solid #2fb3f9;
}

.navbar li {
	list-style-type: none;
	display: inline;
	height: auto;
}

.navbar li a {
	padding: 20px 25px;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	font-weight: bolder;
	color: #516f7f;
}

.navbar li a:hover {
	color: #ff9d00;
	transition: color ease 0.3s;
}

.navbarNight {
	background-color: #556bb5;
	border-bottom: 3px solid white;
}

.navbarNight li a {
	color: white;
}

.nightText {
	position: absolute;
	color: white;
	font-weight: bolder;
	top: 9px;
	right: 12px;
}

.nightTextNight {
	color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
	<title>Night Mode - TEST</title>
</head>
<body id="body">
	<div id="container">
		<div id="nav">
			<ul id="navbar" class="navbar">
				<li><a href="#">Home</a></li>
				<li><a href="#">About me</a></li>
				<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
			</ul>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

PD: I added console.log(nightText.className); to show the classes, you can remove it.

Upvotes: 1

MikeTheReader
MikeTheReader

Reputation: 4190

What about wrapping all of the elements that might have a night style different in a div, or even in the body, and then just apply a night class to that wrapper.

You could then add different styles to your elements along the lines of:

.night .navbar { ... just night-related style differences ... }

Then, your toggle would only have to add or remove the class from the wrapping element. You would still have to add new classes for those things that you want to change, but it would only be for the properties you want to change on them.

Upvotes: 0

Everest
Everest

Reputation: 607

You can just toggle the icon class instead of changing the entire i tag

var nightBtn = document.getElementById("switch");
var nightBtnIcon = document.getElementById("switch-icon");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");

function nightMode() {
    nightBtn.classList.toggle("switchNight");
    body.classList.toggle("night");
    navbar.classList.toggle("navbarNight");
    nightBtnIcon.classList.toggle("fa-sun-o");
    nightBtnIcon.classList.toggle("fa-moon-o");
}

HTML: 

<ul id="navbar" class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><div id="switch" class="switch" onclick="nightMode()"><i class="icon fa fa-moon-o" aria-hidden="true" id=“switch-icon”></i></span></div></li>
            </ul>

Upvotes: 1

Related Questions