We Keep Coding

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>

HTML Text NOT Wrapping properly, horizontal scrollbar issue

Building a simple text-based HTML document with limited CSS, and a single Jquery fueled button. I have 1 major issue: My text doesn't want to wrap, it just goes off the screen. It seems like something is wrong with any right-padding I try to apply. Help.
Codepen: https://codepen.io/nightcorey/pen/xxwyNgR
body {
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: absolute;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

Correct your wrapper
.wrap {
padding: 0 5% 0 5%;
box-sizing: border-box;
}
UPDATE 2
Removed some excess code, rewrited it a bit
body {
width: 100%;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder > div {
width: 100%;
/* height: 100%;*/
position: absolute;
z-index: 0;
/*init z-index*/
display: none;
}
.holder > div.current {
z-index: 1;
display: block;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
padding:0 5% 0 5%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

You need to get rid of overflow: hidden; in the body. Also I noticed you're button for "yay" is probably not doing what you'd like it to do. You need to change the position from absolute to fixed.
body {
width: 100vw;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>
Here's the jsfiddle also. https://jsfiddle.net/5h2aqr6t/

Why can't I use the search features in html and javascript?

I'm trying to create a website about song lyrics using the Musixmatch API and want to apply a custom element, shadow DOM, webpack, etc.
but I have a problem in the search function because it can't search even though I already created the function in src -> script -> data -> data-source.js and songs.js
I beg for your help, thank you :)
and it still undefined result :(
index.html
document.addEventListener("DOMContentLoaded", main);
/* Dasar */
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
:root {
--warna-hitam:#333333;
--warna-ungu: #2c072c;
--warna-pink: #ff536e;
--warna-putih: #FFFAF0;
--gradasi: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
--bayangan: rgba(0, 0, 0, 0.2);
}
h1,h2,h3{
font-family: 'Montserrat', sans-serif;
text-align: center;
}
h4,h5,h6,p {
font-family: 'Poppins', sans-serif;
}
.section {
padding: 4rem 1.5rem;
display: block;
}
body,
button,
input,
select,
textarea{
font-family: 'Montserrat', sans-serif;
}
.container {
text-align: center;
margin: 0;
}
/* ----------------------------------- */
/*Form Pencarian*/
form {
width:1200px;
margin:50px auto;
}
.search {
padding:20px 30px;
border-radius: 15px;
background:rgba(197, 190, 190, 0.2);
border:0px solid #dbdbdb;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.button {
position:relative;
padding:18px 24px;
border-radius: 12px;
margin-left: 10px;
left:-8px;
background-color:#FF8C00;
color:#fafafa;
font-family: 'Montserrat', sans-serif;
font-weight: bolder;
font-size: 18px;
}
.button:hover {
background-color:#fafafa;
color:#FF8C00;
}
/* ----------------------------------- */
/* Card */
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
}
.card:hover {
transform: scale(0.9, 0.9);
box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25),
-5px -5px 30px 15px rgba(0,0,0,0.22);
}
.title-white {
color: white;
}
.title-black {
color: black;
}
#media all and (max-width: 500px) {
.card-list {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
/* ----------------------------------- */
/* Menu Navigasi */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: var(--warna-ungu);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {
background-color: #111;
}
ul.topnav li.icon {
display: none;
}
/* ----------------------------------- */
/* Text Heading */
.heading {
margin: 20px;
font-size: 2rem ;
color: var(--warna-pink);
}
.subtitle {
margin: 15px;
text-align: center;
font-size: 1.2rem;
color: #3f4957;
}
/* ----------------------------------- */
/* FONT */
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
/* ----------------------------------- */
/* Footer */
footer{
display: flex;
flex-direction: column;
margin: 20px 0px;
padding: 30px 30px;
background-color: var(---warna-putih);
color: #3f4957;
text-align: center;
font-size: 12px;
font-weight: 800;
}
/* ----------------------------------- */
/* RENSPONSIVE */
/* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka menu yaitu (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu
*/
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style/style.css">
<script src="https://kit.fontawesome.com/1cb0b252aa.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="src/img/favicon.png">
<title>DapatLirik</title>
</head>
<header>
<nav id="appBar" class="app-bar">
<ul class="topnav">
<li><i class="fas fa-music"></i>Dapat<strong>Lirik</strong></li>
<li>About Us</li>
<li>Find Lyrics</li>
<li class="icon">
☰
</li>
</ul>
</nav>
</header>
<body>
<main>
<!-- Search Lagu -->
<section>
<h3 class="heading" id="find-lyrics" ><span><i class="fab fa-mixcloud fa-2x"></i></span> Lirik Favorit Anda Disini!</h3>
<p class="subtitle">Temukan Lirik Lagu favorit anda dengan satu klik saja!</p>
<div class="container search-container" id="search-container">
<form id="track.search">
<input class="search" type="search" placeholder="Ketik Judul Lagu/Lirik" id="searchElement" required>
<input class="button" type="button" id="searchButtonElement" value="Cari">
</form>
</div>
</section>
<!-- Top 8 Tracks -->
<section>
<h3 class="heading"><span><i class="fas fa-microphone-alt fa-2x"></i></span>Top 8 Lirik Terfavorit</h3>
<p class="subtitle">8 Lirik Lagu Terfavorit Akhir-Akhir Ini</p>
<div id="songList"></div>
</section>
<!-- Card -->
<div class="cards-list" id="songList">
<div class="card 1" id="artist.albums.get">
<div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 2">
<div class="card_image" id="artist.albums.get">
<img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
</div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 3">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
</div>
<div class="card_title">
<p>Card Title</p>
</div>
</div>
<div class="card 4">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
</div>
<div class="card_title title-black">
<p>Card Title</p>
</div>
</div>
<div class="card 5">
<div class="card_image" id="artist.albums.get"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 6">
<div class="card_image" id="artist.albums.get">
<img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
</div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 7">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
</div>
<div class="card_title">
<p>Card Title</p>
</div>
</div>
<div class="card 8">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
</div>
<div class="card_title title-black">
<p>Card Title</p>
</div>
</div>
</div>
</main>
<!-- Javascript Disini -->
<script>
const myMenu = () => {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<script src="src/script/data/songs.js"></script>
<script src="src/script/data/data-source.js"></script>
<script src="src/script/view/main.js"></script>
<script src="app.js"></script>
</body>
<footer>
<h3><i class="fas fa-music"></i>Dapat<strong>Lirik</strong> 2020 - By <span><i class="fab fa-instagram"></i></span>Ihsandroid </h3>
</footer>
</html>
//data-source.js
function DataSource(onSuccess, onFailed) {
this.onSuccess = onSuccess;
this.onFailed = onFailed;
}
DataSource.prototype.searchSongs = function (keyword) {
const filteredSongs = songs.filter(songs => songs.name.toUpperCase().includes(keyword.toUpperCase()));
if (filteredSongs.length) {
this.onSuccess(filteredSongs);
} else {
this.onFailed(`${keyword} is not found`);
}
};
//songs.js
const songs = [
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
},
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
},
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
}
]
main.js
const main = () => {
const searchElement = document.querySelector("#searchElement");
const buttonSearchElement = document.querySelector("#searchButtonElement");
const songsListElement = document.querySelector("#songList");
const onButtonSearchClicked = () => {
const dataSource = new DataSource(renderResult, fallbackResult);
dataSource.searchSongs(searchElement.value);
};
const renderResult = results => {
songsListElement.innerHTML = "";
results.forEach(songs => {
const {name, album, description} = songs
const songsElement = document.createElement("div");
songsElement.setAttribute("class", "songs");
songsElement.innerHTML = `<img class="songs-album" src="' + ${album} + '" alt="Songs Album">
<div class="songs-info">
<h2>${name}</h2>
<p>${description}</p>
</div>`;
songsListElement.appendChild(songsElement);
})
};
const fallbackResult = message => {
songsListElement.innerHTML = "";
songsListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;
};
buttonSearchElement.addEventListener("click", onButtonSearchClicked);
};
This is My Code on GITHUB :
CLICK HERE

You are calling toUpperCase() on song.name, which is a field that doesn't exist on objects in songs. Did you mean songs.track_name?

I see two issues here. 1) name field is not the part of song object/json in the songs arrays (songs.js) file. Either change the field name to one of the keys on which you want to search(track_name , album_name etc)
if you want to search on name it should be
songs.filter(songs => songs.track_name.toUpperCase().includes(keyword.toUpperCase()));
2) You are using name, album, description fields in renderResult function.
change them to track_name,album_name etc.
const renderResult = (results) => {
songsListElement.innerHTML = '';
results.forEach((songs) => {
const { track_name, album_name, updated_time } = songs;
const songsElement = document.createElement('div');
songsElement.setAttribute('class', 'songs');
songsElement.innerHTML = `<img class="songs-album" src="' + ${album_name} + '" alt="Songs Album">
<div class="songs-info">
<h2>${track_name}</h2>
<p>${updated_time}</p>
</div>`;
songsListElement.appendChild(songsElement);
});
After this I see you are trying to load some images as well. You need to put images with the name of the songs to load it from local

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>

try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..

With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

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.