Collapsible box not showing all of my text in html and css - javascript

I'm not going to feign intelligence, I'm stupid when it comes to this. I have a collapsible box that when opened has two more boxes in it neither box inside shows what it's supposed to. But, if I open the box inside then close the box that has the inside one and re-open it it shows all of my text. Can someone help me fix this so they don't have to open the boxes twice?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.a {
text-align: center;
}
<div class="a">
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
height: 100%;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
height: 360px;
}
</style>
</head>
<body>
<div class="a">
<h1> Staffs</h1>
<button class="collapsible"> Staff guides here</button>
<div class="content">
<p>Ice</p>
<button class="collapsible">Building</button>
<div class="content">
<p><style>
div.a {
text-align: center;
}
</style>
<div class="a">
<h1>💨💨 Wind staff tutorial 💨💨</h1>
<p>So you want to upgrade the staffs? Follow this and all my other tutorials.</p>
<ol>
<li>Firstly, you want to have the staff<em> <strong>built.</strong></em></li>
<li>Then, you want to go to the <em> <strong>CRAZY PLACE. </strong></em></li>
<li>Now, you want to go to the wind part of the Crazy Place and look up. You should see symbols when you look up.</li>
<li>Now, you want to shoot them to where it looks like this at the bottom of the cage (Inner is nearest to thing in the middle) but of course it has to be with the <em> <strong> Wind staff </em> </strong></li>
</ol>
<p><br /> <br /> <br /> <br /> <br /> <img src="http://www.kronorium.com/img/wind_staff.png" alt="" width="'120"" height="240" /></p>
</div> </p>
</div>
<button class="collapsible"> Upgrading</button>
<div class="content">
<p>INSERT NEW CODE HERE</p>
</div>
<p>The Ice Staff is one of, if not the best staffs that's easy to get and upgrade. When shot it freezes zombies. </p>
</div>
<h1> Map of Origins </h1>
<p> By ZedzDEMIZie on Imgur</p>
<button class="collapsible"> Origins map image</button>
<!-- Remember to fix gray background. This can be done by modding the div-->
<div class="content">
<img alt="Origins map by ZedzDEMIZie" src="origins.jpg" width="500">
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>

The problem is that you lock the height of .content to a fixed pixel value at the time you open the box. This is needed for the transition effect you use, but creates the problem you describe.
A possible workaround is to set the height to a variable amount after the transition effect.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = content.scrollHeight + "px";
setTimeout(function() {
content.style.maxHeight = null;
}, 50)
} else {
content.style.maxHeight = content.scrollHeight + "px";
setTimeout(function() {
content.style.maxHeight = "fit-content";
}, 250)
}
});
}
div.a {
text-align: center;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
height: auto;
}
.active,
.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
height: auto;
max-height: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="a">
<h1> Staffs</h1>
<button class="collapsible"> Staff guides here</button>
<div class="content">
<p>Ice</p>
<button class="collapsible">Building</button>
<div class="content">
<p>
<div class="a">
<h1>💨💨 Wind staff tutorial 💨💨</h1>
<p>So you want to upgrade the staffs? Follow this and all my other tutorials.</p>
<ol>
<li>Firstly, you want to have the staff<em> <strong>built.</strong></em></li>
<li>Then, you want to go to the <em> <strong>CRAZY PLACE. </strong></em></li>
<li>Now, you want to go to the wind part of the Crazy Place and look up. You should see symbols when you look up.</li>
<li>Now, you want to shoot them to where it looks like this at the bottom of the cage (Inner is nearest to thing in the middle) but of course it has to be with the <em> <strong> Wind staff </em> </strong>
</li>
</ol>
<p>
<br/><br/><br/><br/><br/>
<img src="http://www.kronorium.com/img/wind_staff.png" alt="" width="'120"" height="240" />
</p>
</div>
</p>
</div>
<button class="collapsible"> Upgrading</button>
<div class="content">
<p>INSERT NEW CODE HERE</p>
</div>
<p>The Ice Staff is one of, if not the best staffs that's easy to get and upgrade. When shot it freezes zombies. </p>
</div>
<h1> Map of Origins </h1>
<p> By ZedzDEMIZie on Imgur</p>
<button class="collapsible"> Origins map image</button>
<div class="content">
<img alt="Origins map by ZedzDEMIZie" src="origins.jpg" width="500">
</div>
</body>
</html>
</body>
</html>

This solution breaks the transition effect, but fixes the problem. You'll need to find another way to apply the transition effect.
Set content.style.maxHeight to "fit-content".
Set height of .collapsible to auto.
Remove the stray <div class='a'> tag that is sitting inside the <style> tag. (How did that get there?)

Related

Scroll Indicator Active color

Hi how can i active my scroll indicator to stay orange whenever i press?
Current result : When i press it still remain gray
Expected result: When i press the specify dot stay orange
I try to use ::after,::before % visited and it still not working
Does anyone know how can i solve this?
Expected result:
Whenever i click on the dot it still active with orange color and scroll to the section
<style>
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step:active {
background-color: #FF761F;
}
<div class="scroll" >
</div>
<section id="1" class="section">
Hello
</section>
<section id="2" class="section">
Good Morning
</section>
<section id="3" class="section">
Good Night
</section>
`your text`
$(function(){
$(".scroll a").on('click',function(){
$("step").addClass('active');
$("html,body").animate({
scrollTop: $($.attr(this,'href')).offset().top
},300);
});
});
that thread is for browsing. With three javascript functions, we have made it so that when the first, second, and third buttons are clicked, they will be orange. another piece of code already deals with scrolling. below we have a comment, when we remove that comment and scroll, we will see that certain numbers appear in the console, we enter those numbers as if value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.scroll{
position: fixed;
background-color: rgb(183, 255, 251);
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.active {
height: 15px;
width: 15px;
margin: 0 2px;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
background-color: #FF761F;
}
</style>
<div class="scroll">
</div>
<section id="1" class="section">
<br><br>
Hello
</section>
<section id="2" class="section">
<br><br>
Good Morning
</section>
<section id="3" class="section">
<br><br>
Good Night
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<script>
function fun1() {
document.getElementById("a1").className = "active";
document.getElementById("a2").className = "step";
document.getElementById("a3").className = "step";
}
function fun2() {
document.getElementById("a2").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a3").className = "step";
}
function fun3() {
document.getElementById("a3").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a2").className = "step";
}
window.addEventListener('scroll', () => {
const scrolled=window.scrollY;
if ( scrolled >1){
document.getElementById("a1").className="active";
document.getElementById("a2").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >45){
document.getElementById("a2").className="active";
document.getElementById("a1").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >105){
document.getElementById("a3").className="active";
document.getElementById("a1").className="step";
document.getElementById("a2").className="step";
}
//console.log(scrolled)
});
</script>
</body>
</html>

How to make useable delete button to delete comments

I will like to know how to make my delete button work it has the id's of the comments and i just need to know how to get the button to delete the comments.I would also like to make it so the user can only delete there comment not other users i would also like to know how to put a date on a comments.
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
const Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(Comment){
if (comment.id === idToDelete){
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rahim reviews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>
This works, changed render(), deleteComment() and const -> let Comments
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
let Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime().toString();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(comment){
if (comment.id === idToDelete){
document.getElementById(comment.id).style.display = "none"
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
element.setAttribute("id", comment.id);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rahim reviews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

Why does my javascript slideshow not work and result in a "Cannot set properties of undefined(setting 'className')?

I am trying to create a slideshow in javascript, where pressing the 'next' and 'previous' buttons should take you to the next and previous slides.
When I run the code, the slideshow doesn't work, instead, the new "slides" end up coming below the existing slide. Apart from this, there is an error, "Cannot set properties of undefined (setting 'className')".
Here is my html:
<div id="slideshow_container">
<!-- This is the start of the slideshow-->
<div id="bg" class="slide_active"> <!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
</div>
<div id="message_div" class="slide"><!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>
Here is my css:
#img{
width: 100%;
height: 100%;
object-fit: fill;
}
#info{
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who{
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2{
font-weight: bold;
}
#bg{
background-color: green;
width:1600px;
height: 619px;
}
#prev{
position:relative;
top:575px;
left:10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next{
position:relative;
top:575px;
left:1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container{
width: 1600px;
height: 619px;
position:relative;
}
.slide{
display:none;
object-fit: fill;
}
.slide_active{
display:block;
}
#message_div{
text-align: center;
}
#belief{
text-align: center;
}
And finally, here is my javascript:
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n){
show_slides(Slide_number += n);
}
function Prev_Slide(n){
show_slides(Slide_number -= n);
}
/* Literally the slide number(not indexed) */
function show_slides(n){
let i;
let slides = document.getElementsByClassName("slide");
if (n>slides.length){
Slide_number = 1;
}
if (n<1){
Slide_number = slides.length
}
for(i=0; i<slides.length; i++){
slides[i].className = "slide";
}
slides[Slide_number-1].className = "slide_active";
}
Can someone please help me out with exactly what is wrong with my approach? I do not understand the issue. I am using bootstrap, but I don't think that would interfere with my code much.
You are replacing the classnames of the sildes every time you click on anchor tag. You need addition assignment operator += and a space for
it. So you can add class to that element.
You can also use classList.add() method.
slides[Slide_number - 1].classList.add("slide_active");
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n) {
show_slides(Slide_number += n);
}
function Prev_Slide(n) {
show_slides(Slide_number -= n);
}
function show_slides(n) {
let slides = document.getElementsByClassName("slide");
if (n > slides.length) Slide_number = 1;
if (n < 1) Slide_number = slides.length;
console.log(Slide_number);
for (let i = 0; i < slides.length; i++) {
slides[i].className = "slide";
}
slides[Slide_number - 1].className += " slide_active";
}
#img {
width: 100%;
height: 100%;
object-fit: fill;
}
#info {
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who {
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2 {
font-weight: bold;
}
#bg {
background-color: green;
width: 1600px;
height: 619px;
}
#prev {
position: relative;
top: 575px;
left: 10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next {
position: relative;
top: 575px;
left: 1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container {
width: 1600px;
height: 619px;
position: relative;
}
.slide {
display: none;
object-fit: fill;
}
.slide_active {
display: block;
}
#message_div {
text-align: center;
}
#belief {
text-align: center;
}
<div id="slideshow_container">
<!-- This is the start of the slideshow-->
<div id="bg" class="slide_active">
<!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
</div>
<div id="message_div" class="slide">
<!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>
Put your script just before the end of your body tag. If not you will get the undefined message. Why? Because your by that time DOM is already loaded and ready for manipulation so you will have access to any element you wish to manipulate.
As for your slide showing under other, here is the working solution. When you add a classname with JS, if you want to replace an existing classname you can use = but if you want to add to an existing class, you need to keep a space before it
and use += so that you don't overwrite the already existing class and you will have class="existingclass addedclass". Also modified css, you can read the comment at the top. Also I have taken out next and previous button out of #bg div and placed it inside container directly, since it is a slide itself, your next slide won't be able to see those buttons. That's all. You can run the code directly to see it for yourself.
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n){
show_slides(Slide_number += n);
}
function Prev_Slide(n){
show_slides(Slide_number -= n);
}
/* Literally the slide number(not indexed) */
function show_slides(n){
let i;
let slides = document.getElementsByClassName("slide");
if (n>slides.length){
Slide_number = 1;
}
if (n<1){
Slide_number = slides.length
}
for(i=0; i<slides.length; i++){
slides[i].className = "slide";
}
// keep space before slide_active and use += instead
slides[Slide_number-1].className += " slide_active";
}
/* gave slide container a green background so that you will be able to see white next and prev text, also removed style for #bg since it is a slide itself */
#img{
width: 100%;
height: 100%;
object-fit: fill;
}
#info{
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who{
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2{
font-weight: bold;
}
#prev{
position:relative;
top:575px;
left:10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next{
position:relative;
top:575px;
left:1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container{
width: 1600px;
height: 619px;
position:relative;
background-color: green;
}
.slide {
display:none;
object-fit: fill;
}
.slide_active{
display:block;
}
#message_div{
text-align: center;
}
#belief{
text-align: center;
}
<div id="slideshow_container">
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
<!-- This is the start of the slideshow-->
<div id="bg" class="slide"> <!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
</div>
<div id="message_div" class="slide"><!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>

Why does JavaScript write an element to the console but not update the css display value via a function?

I'm completing an assignment for university as part of a group. We have encountered an issue with a certain event not triggering when using JavaScript to change css properties on button click. We are not looking for anyone to write/re-write our code to be industry standard, but we are looking to work out (with a little help from you) where we have gone wrong.
We are tasked with writing a report and presenting it in webpage format.
We are writing the page using HTML/CSS and a small amount of JavaScript for things like drop-down menus and displaying sections of the page on button click.
The particular issue we can't work out (code below) is when a menu button is clicked, the JS should populate the heading of the page and display a div in the body.
I can either get it to work as intended, though only 3 div are referenced (the code seems to ignore the array elements after the 3rd), or get it to work with all headings but no div are referenced (per below).
CMVE as follows (full code below):
let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
/* var i;
for (i=0; i<sections.length;i++) {
console.log(sections[i]);
}
*/
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections();
}
function hideSections() {
var i, targetSection, headerText;
for (i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(visSection);
if (visSection === targetSection) {
// console.log(visSection, targetSection, section);
section.style.display = "block";
headerText = visSection;
} else {
section.style.display = "none";
}
populateHeader(headerText);
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
<!doctype HTML>
<html>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
Stanton
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<script>
//Insert JS from JS snippet
</script>
</body>
</html>
I feel we may be misunderstanding a datatype somewhere perhaps, but we are all still learning and have been staring at this for days (the issue is probably right in front of our eyes!).
Full code Snippet with CSS:
let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
var i;
for (i = 0; i < sections.length; i++) {
console.log(sections[i]);
}
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections(visSection);
}
function hideSections(sectionID2) {
var i, targetSection, headerText;
for (i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(sectionID2);
if (visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
headerText = visSection;
} else {
section.style.display = "none";
}
populateHeader(headerText);
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
var dropdown = document.getElementsByTagName("button");
var i, objCol;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/
body {
font-family: Arial, Veranda, Serif;
margin: 0;
}
/*Sets attributes for the nav menu root element*/
#nav-menu {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 0;
background-color: #353940;
overflow-x: hidden;
text-decoration: none;
text-align: center;
z-index: 1;
}
/*specifies hyperlink button text attributes*/
#nav-menu a {
text-decoration: none;
color: white;
font-size: 12pt;
display: block;
border-top: 1px solid white;
overflow: visible;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/*Specifies most dropdown button attributes.*/
button.drop-button {
text-decoration: none;
background-color: #353940;
border: 0;
width: 100%;
color: white;
height: 20px;
outline: none;
font-size: 12pt;
border-top: 1px solid white;
overflow: visible;
padding-top: 5px;
padding-bottom: 5px;
}
/*Active class to highlight activated dropdown buttons*/
button.active {
background: #230fa8;
}
/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/
.dropdown-content {
display: none;
background-color: #4a5059;
}
/*specifies layout for dropdown menu items*/
.dropdown-content a {
display: block;
padding-top: 5px;
}
/*keeps header in line with rest of body*/
#header-content {
padding-left: 17%;
}
/*specifies positioning for body container divs*/
.body-panel {
position: absolute;
padding-left: 17%;
width: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
<title>Assignment 2 Group 12</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
<main>
<nav id="nav-menu">
Home
<button class="drop-button">About Us &#x25BC </button>
<div class="dropdown-content" style="display: none;">
Stanton
Jenna
Cooper
</div>
<button class="drop-button">Profile ▼</button>
<div class="dropdown-content">
Test
</div>
IT Work
Industry Data
Our Project
IT Technologies
</nav>
<div id="Welcome" class="body-panel" style="display: none;">
<h2> </h2>
<p> Please select an option from the menu. </p>
</div>
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<div id="Jenna" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Jenna </p>
</div>
<div id="Cooper" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Cooper </p>
</div>
</main>
<footer>
</footer>
<script>
//JS from snippet goes here
</script>
</body>
</html>
let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
var i;
for (i = 0; i < sections.length; i++) {
console.log(sections[i]);
}
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections(visSection);
}
function hideSections(sectionID2) {
var i, targetSection, headerText;
for(i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(targetSection);
if(visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
populateHeader(visSection); // moved to here as per Andreas point
} else {
if (typeof(section) != 'undefined' && section != null){
section.style.display = "none";
}
}
//populateHeader(headerText); <- move as per Andreas point
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
var dropdown = document.getElementsByTagName("button");
var i, objCol;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/
body {
font-family: Arial, Veranda, Serif;
margin: 0;
}
/*Sets attributes for the nav menu root element*/
#nav-menu {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 0;
background-color: #353940;
overflow-x: hidden;
text-decoration: none;
text-align: center;
z-index: 1;
}
/*specifies hyperlink button text attributes*/
#nav-menu a {
text-decoration: none;
color: white;
font-size: 12pt;
display: block;
border-top: 1px solid white;
overflow: visible;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/*Specifies most dropdown button attributes.*/
button.drop-button {
text-decoration: none;
background-color: #353940;
border: 0;
width: 100%;
color: white;
height: 20px;
outline: none;
font-size: 12pt;
border-top: 1px solid white;
overflow: visible;
padding-top: 5px;
padding-bottom: 5px;
}
/*Active class to highlight activated dropdown buttons*/
button.active {
background: #230fa8;
}
/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/
.dropdown-content {
display: none;
background-color: #4a5059;
}
/*specifies layout for dropdown menu items*/
.dropdown-content a {
display: block;
padding-top: 5px;
}
/*keeps header in line with rest of body*/
#header-content {
padding-left: 17%;
}
/*specifies positioning for body container divs*/
.body-panel {
position: absolute;
padding-left: 17%;
width: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
<title>Assignment 2 Group 12</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
<main>
<nav id="nav-menu">
Home
<button class="drop-button">About Us &#x25BC </button>
<div class="dropdown-content" style="display: none;">
Stanton
Jenna
Cooper
</div>
<button class="drop-button">Profile ▼</button>
<div class="dropdown-content">
Test
</div>
IT Work
Industry Data
Our Project
IT Technologies
</nav>
<div id="Welcome" class="body-panel" style="display: none;">
<h2> </h2>
<p> Please select an option from the menu. </p>
</div>
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<div id="Jenna" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Jenna </p>
</div>
<div id="Cooper" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Cooper </p>
</div>
</main>
<footer>
</footer>
<script>
//JS from snippet goes here
</script>
</body>
</html>
The problem lies in your for loop.
You are passing in the sectionID2 so it is always the item selected and stored as section.
You loop sets the visibility of the item for every iteration instead of the current section that is being tested against.
change section = document.getElementById(sectionID2); to section = document.getElementById(targetSection); and it should work (untested).
for(i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(targetSection);
if(visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
populateHeader(visSection); // moved to here as per Andreas point
} else {
section.style.display = "none";
}
//populateHeader(headerText); <- move as per Andreas point
}

Trying to use a swipe.js function on a page

I write a webapp using a swipe.js function to swap between the two pages. Problem is that it that i wont swipe trough the first page, if i remove the html code to the first page it will swipe back and forth without problems between the two pages. I cant load the second page when the first page is on. Anyone who knows what the problem could be?
code:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles1</h1>
</div>
<div data-role="content">
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
</head>
<body>
<div class="colunm">
<h>
<p>
<p>
<div class="pie">
<span class="overlay"></span>
</div>
<style>
.pie {
margin: auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
overflow: hidden;
}
.pie::after {
transform: rotate({{temp_x}}deg); /* set rotation degree */
background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
transform-origin: center bottom;
}
.pie::before {
border: 2px solid black;
}
.pie .overlay{
top: 8px; /* match border width */
left: 8px; /* match border width */
width: calc(100% - 16px); /* match border width times 2 */
height: calc(200% - 10px); /* match border width times 2 */
border-radius: 100%;
background: #062F43;
z-index: 1; /* move it on top of the pseudo elements */
}
.pie *,
.pie::before,
.pie::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;
}
</style>
</body>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2> </center>
<p> <center style="color: white;">14:42</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2> </center>
<p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2> </center>
<p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2> </center>
<head>
<style="color=white">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head><body onload="startTime()">
<div> <center id="txt"></div> </center>
</div>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
<style>
.button {
background-color: #07969E;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {background-color: #008a93}
.button:active {
background-color: #008a93;
box-shadow: #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<button class="button">Button</button>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2>
<center> <button class="button">Button</button> </center>
<style="color=white">
<div> <center id="txt"></div>
</div>
</div>
<div>
<div class="row">
</div>
<center div class="column1" align="cente">
<h2> <center style="color: #07969E;">Live graph</h2>
<h3> <center style="color: white;"> Click Me </h3>
</div>
<div id="sidebar">
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
</script>
</html>
You got your markup mixed up quite a tad there. There's multiple <head> and <body> tags while the standard only allows one of each.
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
You will need to reduce your code to a valid HTML document to make this work. It looks like you copied the source of multiple individual files into one, you have to combine the different elements, though.
Start off with the basic HTML structure
Copy all elements from the individual headparts into the <head>
Copy all <style> tags to the <head>
Copy all markup of each individual page into the <body> element
Copy all <script> tags to the <body>
While you do this, make sure to get rid of redundant code. The style tags look fairly close to each other, for example.

Categories