Issue with Selection dropdown when it is 'required'

Issue with Selection dropdown when it is 'required' - javascript

I am using the 'required' tag in HTML to validate input. However, I am having an error with the the selection. It does not show the option nor am I able to continue.
const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;
nextBtnFirst.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-75%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
submitBtn.addEventListener("click", function() {
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
setTimeout(function() {
alert("Your Consultation Successfully Submitted");
location.reload();
}, 800);
});
prevBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "0%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnFourth.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
let data = [{
"id": 1,
"name": "Management",
"parentid": 0
},
{
"id": 2,
"name": "Support",
"parentid": 0
},
{
"id": 3,
"name": "Digital Business",
"parentid": 0
},
{
"id": 4,
"name": "Cyber Security",
"parentid": 0
},
{
"id": 5,
"name": "Infrastructure",
"parentid": 0
},
{
"id": 6,
"name": "Network",
"parentid": 0
},
{
"id": 8,
"name": "MDM Solution",
"parentid": 1
},
{
"id": 9,
"name": "IT Procurement",
"parentid": 1
},
{
"id": 10,
"name": "Vendor Management",
"parentid": 1
},
{
"id": 11,
"name": "Managed servers, Network, Firewall",
"parentid": 1
},
{
"id": 12,
"name": "Backup and Storage",
"parentid": 1
},
{
"id": 13,
"name": "Email Management",
"parentid": 1
},
{
"id": 14,
"name": "Microsoft Office Management",
"parentid": 1
},
{
"id": 15,
"name": "Asset Management",
"parentid": 1
},
{
"id": 16,
"name": "Network Management",
"parentid": 1
},
{
"id": 17,
"name": "Communication Management",
"parentid": 1
},
{
"id": 21,
"name": "Patch Management",
"parentid": 1
},
{
"id": 18,
"name": "IT Helpdesk",
"parentid": 2
},
{
"id": 19,
"name": "Maintenance of Servers",
"parentid": 2
},
{
"id": 20,
"name": "Network Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Communication Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Patch Management",
"parentid": 2
},
{
"id": 22,
"name": "Disaster Recovery Testing and Support",
"parentid": 2
},
{
"id": 23,
"name": "Pro-active Capacity Planning and Support",
"parentid": 2
},
{
"id": 24,
"name": "Remote and Onsite Support",
"parentid": 2
},
{
"id": 25,
"name": "Office 365 Migration",
"parentid": 3
},
{
"id": 26,
"name": "Managed Offsite Backups",
"parentid": 3
},
{
"id": 27,
"name": "Azure Migration & Uplift",
"parentid": 3
},
{
"id": 28,
"name": "SaaS Products Support ",
"parentid": 3
},
{
"id": 29,
"name": "Microsoft Teams Setup",
"parentid": 3
},
{
"id": 30,
"name": "SharePoint Configuration",
"parentid": 3
},
{
"id": 32,
"name": "Risk Assessment",
"parentid": 4
},
{
"id": 33,
"name": "Cloud base & on prem SIEM Solution Implementation",
"parentid": 4
},
{
"id": 34,
"name": "Vulnerability & penetration testing",
"parentid": 4
},
{
"id": 35,
"name": "Cyber Security Incident Response Plan",
"parentid": 4
},
{
"id": 36,
"name": "Cloud Security",
"parentid": 4
},
{
"id": 37,
"name": "CyberArk PAM solution",
"parentid": 4
},
{
"id": 38,
"name": "SME Upgrades and Consolidation",
"parentid": 5
},
{
"id": 39,
"name": "Dell Networking",
"parentid": 5
},
{
"id": 40,
"name": "Data Centre Design",
"parentid": 5
},
{
"id": 41,
"name": "Storage Design and Installation",
"parentid": 5
},
{
"id": 42,
"name": "Disaster Recovery Infrastructure",
"parentid": 5
},
{
"id": 43,
"name": "Redundancy Planning",
"parentid": 6
},
{
"id": 44,
"name": "Internet and WAN Connectivity Design",
"parentid": 6
},
{
"id": 45,
"name": "Cabling Design",
"parentid": 6
},
{
"id": 46,
"name": "Network Switching Design and Scale",
"parentid": 6
},
{
"id": 47,
"name": "Routing Design ",
"parentid": 6
},
{
"id": 48,
"name": "Firewall Design and Maintenance ",
"parentid": 6
},
{
"id": 49,
"name": "Fibre, Cat5, Cat6 and WiFi Planning and Installation",
"parentid": 6
},
{
"id": 50,
"name": "Access Network Design ",
"parentid": 6
},
{
"id": 51,
"name": "Automation Workflows and Software Development",
"parentid": 6
},
{
"id": 52,
"name": "Campus Network Design",
"parentid": 6
},
{
"id": 53,
"name": "ISP Network Design",
"parentid": 6
},
]
function populateList(list, pid) {
let l = document.getElementById(list);
l.innerHTML = "";
let topItem = document.createElement("option");
topItem.value = 0;
topItem.text = "--Select--";
l.appendChild(topItem);
let items = data.filter(item => item.parentid == pid);
items.forEach(function(item) {
let newItem = document.createElement("option");
newItem.value = item.id;
newItem.text = item.name;
l.appendChild(newItem);
})
}
function updateList(selList, thisList) {
if (thisList.value != 0) {
populateList(selList, Number(thisList.value));
} else {
let s = document.getElementById(selList);
s.value = 0;
triggerEvent(s, "onchange");
let sCopy = s.cloneNode(false);
let p = s.parentNode;
p.replaceChild(sCopy, s);
}
}
function triggerEvent(e, trigger) {
if ((e[trigger] || false) && typeof e[trigger] == 'function') {
e[trigger](e);
}
}
function loadList1() {
populateList("list1", 0);
}
window.onload = loadList1;
if (FullNameValue === '') {
setErrorFor(FullName, FullName 'Full Name cannot be blank');
}
::selection {
color: #fffef8;
background: #4197a9;
}
.container {
width: 750px;
margin-left: 0px;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header {
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
right: auto;
}
.container .form-outer {
width: 100%;
overflow: hidden;
margin-left: 300px;
}
.container .form-outer form {
display: flex;
width: 600%;
}
.form-outer form .page {
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title {
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field {
width: 800px;
height: 45px;
margin: 90px 0;
display: flex;
position: relative;
}
form .page .field .label {
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input {
height: 80%;
width: 70%;
border: 1px solid #33343d;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select {
width: 80%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button {
width: 250px;
height: calc(100% + 5px);
border: none;
background: #4197a9;
margin-top: -10px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
margin-left: 10px;
margin-right: 10px;
}
form .page .field button:hover {
background: #000;
}
form .page .btns button {
margin-top: -20px!important;
}
form .page .btns button.prev {
margin-right: 10px;
font-size: 17px;
}
form .page .btns button.next {
margin-left: 20px;
}
.container .progress-bar {
display: flex;
user-select: none;
left: 250px;
position: relative;
}
.container .progress-bar .step {
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p {
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet {
height: 28px;
width: 28px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 24px;
}
.progress-bar .step .bullet.active {
border-color: #4197a9;
background: #4197a9;
}
.progress-bar .step .bullet span {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span {
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after {
position: absolute;
content: '';
bottom: 11px;
right: -51px;
left: 50px;
height: 3px;
width: 100px;
background: black;
}
.progress-bar .step .bullet.active:after {
background: #4197a9;
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after {
display: none;
}
.progress-bar .step p.active {
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check {
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active {
display: block;
color: #fffef8;
}
<div class="progress-bar">
<div class="step">
<p>
Name</p>
<div class="bullet">
<span>1</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Contact</p>
<div class="bullet">
<span>2</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Service</p>
<div class="bullet">
<span>3</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Submit</p>
<div class="bullet">
<span>4</span>
</div>
<div class="check fas fa-check">
</div>
</div>
</div>
<div class="form-outer">
<form action="#">
<div class="page slide-page">
<div class="title">
Lets get Started
</div>
<div class="form-control">
<div class="field">
<div class="label">
Full Name </div>
<input type="text" placeholder="FirstName SecondName " id="FullName" required>
</div>
<div class="field">
<div class="label">
Company Name</div>
<input type="text" placeholder="Name" id="comname" required>
</div>
<div class="field">
<button class="firstNext next" style="position: relative; left: 280px;">Next</button>
</div>
</div>
</div>
<div class="page">
<div class="title">
Contact Info:</div>
<div class="field">
<div class="label">
Email Address</div>
<input type="email" placeholder="name#example.com" required>
</div>
<div class="field">
<div class="label">
Phone Number</div>
<input type="number" placeholder="+61 412 345 678" required>
</div>
<div class="field btns">
<button class="prev-1 prev">Previous</button>
<button class="next-1 next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Services</div>
<div class="field">
<div class="label">
Service Category</div>
<select id="list1" onchange="updateList('list2', this);" required>
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required></select>
</div>
<div class="field">
<div class="label">
Description
</div>
<textarea name="Description" id="" cols="75" rows="100" style="height:60px;" placeholder="Provide a small description about the service you have selected."></textarea>
</div>
<div class="field btns">
<button class="prev-2 prev" style="position: relative; left: 30px;">Previous</button>
<button class="next-2 next" style="position: relative; left: 30px;">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Submit</div>
<div class="field">
<div class="label">
Pefered method of Communication</div>
<select name="communica" id="" required>
<option value=""></option>
<option value="Phone">Phone </option>
<option value="Email ">Email </option>
<option value="SMS">SMS </option>
</select>
</div>
<div class="textsub" style="position: relative; left: 0; margin-right: 400px;">
We will reach out to you with some proposal and we will discuss which will be the best for you while hearing your feedback. You should recieve an email within 24 hours with what will be happening. Thank you
</div>
<div class="field btns">
<button class="prev-3 prev">Previous</button>
<button class="submit" style="left: 50px; position: relative;">Submit</button>
</div>
</div>
</form>
</div>
</div>
I have included the relevant code below.
<select id="list1" onchange="updateList('list2', this);" required >
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required ></select>
</div>

Related

Json data not displayed because of a syntax error

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Florida Tempatations</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<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=Inter&display=swap" rel="stylesheet">
</head>
<body>
<section class = "header">
<nav>
<img src="logo.png">
<div class="nav-links">
<ul>
<li>HOME</li>
<li>ATTRACTIONS</li>
<li>ABOUT US</li>
</ul>
</div>
</nav>
<div id="attractions-container" style="text-align: center;"> </div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
index.html^^
fetch('attractions.json')
.then(response => response.json())
.then(data => {
const list = document.querySelector('attractions');
data.forEach(attraction => {
const item = document.createElement('li');
item.innerHTML = `<h2>${attraction.name}</h2>
<p>Location: ${attraction.location}</p>
<p>Category: ${attraction.category}</p>`;
list.appendChild(item);
});
})
.catch(error => {
console.error('Error:', error);
});
script.js
{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park",
}
]
}
attractions.json^^
*{
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url('back.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
nav{
justify-content: space-between;
align-items: center;
display: flex;
padding: 1% 2%;
}
nav img{
text-align: right;
flex: 1;
}
.nav-links ul li{
padding: 8px 12px;
position: relative;
list-style: none;
display: inline-block;
}
.nav-links ul li a{
text-decoration: none;
font-size: 24px;
color: #fff;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 4px;
display: block;
margin: auto;
background: #e7902c;
transition: .25s;
}
.nav-links ul li:hover::after{
width: 100%;
}
style.css^^
So basically I am trying to make this display on my website but I am not sure why it's not displaying. I tried my json fetch code and it works after I run some tests on it but I am not sure what is wrong with it because it's not displaying. I have a syntax error but I don't know where so I would appreciate if someone can help me with that. I am still learning my way around HTML CSS and JSON(This is my first time). Sorry if this is a silly question
Error:
Error: Error: SyntaxError
{}https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74
at t.formatMsg
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74:4990) at new e
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74:1632) at t.insertSync
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:97:17121)
at
https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:97:18724

"category": "National Park", needs to be "category": "National Park" since it is the last item.
console.log(JSON.parse(`{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park"
}
]
}`))
But with the comma at the end you get an error:
console.log(JSON.parse(`{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park",
}
]
}`))

I can't make the books slider

There are books in my incoming data. I want to make these books slider by categories. In other words, when I click on the 1st class, the books belonging to the 1st class will be listed. When I click on 2nd grade I want 2nd grade books to be listed. But I want it to be in slider shape. The categories will increase more after that. like 3rd grade 4th grade. Please run the codes in full page
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
]
const n = 6;
const bookshelfbox = document.querySelector('.bookshelfbox');
const bookproduct = document.querySelectorAll('.bookproduct');
const className = document.querySelector('.slides');
const bookproductbox = document.querySelector('.bookproductbox');
const grouredBooks = books.reduce((r, e, i) =>
(i % n ? r[r.length - 1].push(e) : r.push([e])) && r
, []);
console.log(grouredBooks)
grouredBooks.map((books) => {
const row = document.createElement('div');
row.className = 'row';
bookshelfbox.appendChild(row);
return books.map(
(book) =>
(row.innerHTML += `
<div class="bookproductbox">
<div class="bookproduct">
<img
src="${book.bookimage}"
alt=""
width="120"
height="180"
class="img_thumb" style="width: 120px; height: 180px; top: -73px;"
>
<div class="producttitle">
<p> ${book.bookname} </p>
<p> ${book.bookClass} </p>
</div>
</div>
`)
);
});
#charset "UTF-8";
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600;800&family=PT+Serif:wght#400;700&display=swap");
*,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'PT Serif', serif;
}
body a {
text-decoration: none;
}
body a:hover {
text-decoration: none;
}
body .form-control:focus {
outline: none;
box-shadow: none !important;
}
body button:focus {
outline: none;
box-shadow: none;
}
body p {
margin-bottom: 0 !important;
}
.wrapper .booklib {
width: 100%;
height: 100%;
}
.wrapper .booklib .header {
background: #93643a url('images/header2.png') repeat;
color: #e4b173;
width: 100%;
height: 70px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
.wrapper .booklib .header ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper .booklib .header ul li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
margin-right: 15px;
padding: 4px 8px;
border-radius: 5px;
border: #d39e6b solid 1px;
cursor: pointer;
box-shadow: 1px 1px 4px rgb(0 0 0 / 40%);
font-size: 18px;
opacity: 0.7;
transform: scale(0.9);
transition: all .5s ease;
font-weight: 900;
}
.wrapper .booklib .header ul .active {
opacity: 1;
transform: scale(1);
}
.bookshelfbox {
position: relative;
margin: 0;
padding: 0;
left: 0px;
top: 0px;
float: left;
display: block;
width: 100%;
height: auto;
}
.bookshelfbox .bookproductbox {
background: url('images/shelf2.png');
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
height: 225px;
}
.bookproduct {
margin-left: 50px;
position: relative !important;
display: block;
direction: ltr !important;
}
.bookproduct img {
display: block !important;
border: none !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
.producttitle {
position: absolute;
top: 80%;
z-index: 1;
text-align: center !important;
color: #ffffff;
background: #c33b4e;
overflow: hidden;
max-height: auto;
line-height: 14px !important;
width: 100%;
box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);
font-size: 11px;
padding: 1px 5px 3px 5px;
font-family: Arial, Helvetica, sans-serif;
}
.bookproduct:hover .producttitle {
color: rgb(255, 255, 255);
background: url("http://srvalle.com/wp-content/plugins/bookshelf-slider/assets/title_product_bg.png") repeat rgb(195, 59, 78);
overflow: visible;
max-height: 150px;
}
.flexslider {
margin:0;
border:0;
background: none!important;
}
.flex-nav-prev, .flex-nav-next {
display: none;
}
#media (max-width: 575.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
.book-content {
margin-left: 15px;
}
}
#media (min-width: 576px) and (max-width: 767.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
}
#media (min-width: 768px) and (max-width: 991.98px) {
}
.bookshelfbox {
display: flex;
flex-direction: column;
}
.bookproductbox, .row {
display: flex;
}
<!doctype html>
<html lang="tr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/_tema/cms/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title> TG Book Library </title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="booklib">
<div class="header">
<ul class="slides">
<li class="active">
First Class
</li>
<li>
Second Class
</li>
</ul>
</div>
<div class="bookshelfbox">
</div>
</div>
</div>
</div>
<!--/ container end -->
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

I used SwiperApi for this. Check and customize by yourself please.
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
];
const n = 6; // slide per page
const booksBase = $("#booksInto"); // books going to be added into swiper-swapper class.
let defaultClass = $(".btnFilter").data("classname"); // initialize class.
$(document).ready(function () {
$(".btnFilter").click(filterBooks);
filterBooks();
});
filterBooks = function (classname = null) {
// getting value from data attribute if any button clicked
if (classname != null) defaultClass = $(this).data("classname");
let theDiv = "";
$.each(
books.filter((t) => t.bookClass == defaultClass),
function (index, obj) {
theDiv += `
<div class="swiper-slide">
<div class="bookItem">
<img class="card-img-top" src="${obj.bookimage}" alt="${obj.bookname}" />
<div class="card-body">
<p class="card-text">${obj.bookname}</h5>
<p class="card-text">${obj.bookClass}</h5>
Read Book
</div>
</div>
</div>
`;
}
);
booksBase.html(theDiv);
makeSlider();
};
makeSlider = function () {
const swiper = new Swiper(".swiper", {
slidesPerView: n,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
};
<!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" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-lg-12">
<div class="btn-group" role="group" aria-label="Basic example">
<button
type="button"
class="btn btn-secondary btnFilter defaultClass"
data-classname="First Class"
>
Class 1
</button>
<button
type="button"
class="btn btn-secondary btnFilter"
data-classname="Second Class"
>
Class 2
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper" id="booksInto"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Json data render onclick with different content

I am having trouble connecting the button to my JSON structure. I want each button to render each domain. I tried selecting $('button') and applying onlclick() function but it did not work.
Is it because I used JSON to render 4 buttons instead of creating an HTML structure for each?
//landing domain info/deisgn and structure
const domainInfo = [{
id: 001,
domain: "Title 1",
photo: "title-1.jpg",
},
{
id: 002,
domain: "Title 2",
photo: "title-2.jpg",
},
{
id: 003,
domain: "Title 3",
photo: "title-3.jpg",
},
{
id: 004,
domain: "Title 4",
photo: "title-4.jpg",
},
]
function domainTemplate(domaininfo) {
return `
<div class="box__shadow">
<button id="myBtn" class="myBtn" type="button">
<img src="${domaininfo.photo}" width="90%;"style="margin: 0em; padding: 0em;">
<div class="cover-bkg-ser-domain4">
<h4 style="overflow:hidden; color: #1a4177; font-weight: bold; font-size: 18px; padding: 1em; margin: 0em;">${domaininfo.domain}</h4>
</div>
</button>
</div>
`
}
document.getElementById("domainCat").innerHTML = `
${domainInfo.map(domainTemplate).join('')}
`
//Serice category data
const serviceData = [{
domain1Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 2 data
{
domain2Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
// domain 3 data
{
domain3Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 4 data
{
domain4Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
}
]
function servTemplate(servicedata) {
return `
<div class="info-data" id="infodata">
<table>
<colgroup>
<col width="30%"/>
<col width="70%"/>
</colgroup>
<tr>
<th colspan="2" class="header">
<h3>${servicedata.subcat}</h3>
</th>
</tr>
<tr class="">
<td class="title">
<h5>Section 1</h5>
</td>
<td class="text">
<img class="img-service" src="${servicedata.prefpart}">
</td>
</tr>
<tr>
<td class="">
<h5>Section 2</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.secpart}">
</td>
</tr>
<tr>
<td>
<h5>Section 3</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.locpart}">
</td>
</tr>
</table>
</div>
`
}
document.getElementById("serviceCat").innerHTML = `
${serviceData.map(servTemplate).join('')}
`
/*domain names and pics css*/
#domainCat {
width: 100%;
}
.box__shadow {
width: auto;
height: auto;
margin-top: 1em;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
.myBtn {
border: 0px solid #000000;
outline: none;
box-shadow: none;
width: 260px;
height: auto;
background: none;
margin: 1em 1.1em 5em 1.1em;
padding: 0em -1em 5em -1em;
float: left;
}
.myBtn:hover {
outline: none;
background: none;
box-shadow: none;
cursor: pointer;
}
.cover-bkg-ser-domain4 {
background-color: #2BD5F2;
margin: auto auto -2em auto;
width: 90%;
}
.cover-bkg-ser-domain4:hover {
background-color: rgba(165, 209, 238, 0.8);
}
/*list rendering css*/
#serviceCat {
overflow: hidden;
float: left;
background-color: rgba(117, 117, 117, 0.8);
/* Black w/ opacity */
overflow: auto;
/* Enable scroll if needed */
width: 72.5%;
/* Full width */
height: 50%;
/* Full height */
top: 0;
left: 0;
margin-left: 2em;
}
.service-title {
font-style: normal;
font-weight: normal;
font-size: 22px;
text-align: center;
color: #000000;
width: 100%;
}
.info-data {
width: auto;
height: auto;
}
.img-service {
width: 50%;
margin: 1em;
padding: 0em;
display: block;
}
.header {
width: 100%;
background-color: #83e06c;
text-align: center;
}
.row {
display: inline;
background-color: rgba(76, 76, 76, 0.4);
width: 70%;
height: auto;
padding: 0.1em;
margin: 0.2em;
}
.column-1 {
width: 20%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
font-size: 20px;
font-weight: bold;
}
.column-2 {
width: 70%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
}
table,
th,
tr {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<section id="domainCat"></section>
<section id="serviceCat"></section>
</body>
</html>
I can only use jQuery as a library since I am trying to fit the code in SharePoint webparts.

So the issue is that you were trying to add click listener on the object that was created dynamically. You need 4 buttons here so we should also create dynamical listeners in function domainTemplate(); Also we need to pass index here so we can understand which button we are clicking and add class to all buttons.
function domainTemplate(domaininfo, index) {
$(document).on('click',`.btn-${index}`, function() {
document.getElementById("serviceCat").innerHTML = servTemplate(serviceData[index]);
return `
...some html here
<button id="myBtn" class="myBtn btn-${index}" type="button">
`;
});
Also I have fixed your servTemplate() function. There was object that we need to call so we have to always get first item of object. So now servicedata is correct if we call it like this.
function servTemplate(data) {
const servicedata = data[Object.keys(data)[0]][0];
return some html;
}
Please check the full code here https://jsfiddle.net/yh915e6o/

Increase, decrease and remove buttons do not work properly [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I would like to increase, decrease and remove items from my cart page but the buttons only work on the first items and the buttons increase the total amount of items in the cart instead of increasing the individual number of items.I would also like to decrease and increase the total amount as I press the buttons.What am I doing wrong? This is my github hosted page for the final result:/my hosted page.
var carts = document.querySelectorAll(".cart-button");
var products = [
{
id: 1,
name: "Brown Brim",
image: "https://i.ibb.co/ZYW3VTp/brown-brim.png",
price: 25,
inCart:0
},
{
id: 2,
name: "Blue Beanie",
image: "https://i.ibb.co/ypkgK0X/blue-beanie.png",
price: 18,
inCart:0
},
{
id: 3,
name: "Brown Cowboy",
image: "https://i.ibb.co/QdJwgmp/brown-cowboy.png",
price: 35,
inCart:0
},
{
id: 4,
name: "Grey Brim",
image:"https://i.ibb.co/RjBLWxB/grey-brim.png",
price: 25,
inCart:0
},
{
id: 5,
name: "Adidas NMD",
image: "https://i.ibb.co/0s3pdnc/adidas-nmd.png",
price: 220,
inCart:0
},
{
id: 6,
name: "Adidas Yeezy",
image:"https://i.ibb.co/dJbG1cT/yeezy.png",
price: 280,
inCart:0
},
{
id: 7,
name: "Black Converse",
image:"https://i.ibb.co/bPmVXyP/black-converse.png",
price: 110,
inCart:0
},
{
id: 8,
name: "Nike White AirForce",
image:"https://i.ibb.co/1RcFPk0/white-nike-high-tops.png",
price: 160,
inCart:0
},
{
id: 9,
name: "Black Jean Shearling",
image:"https://i.ibb.co/XzcwL5s/black-shearling.png",
price: 125,
inCart:0
},
{
id: 10,
name: "Blue Jean Jacket",
image:"https://i.ibb.co/mJS6vz0/blue-jean-jacket.png",
price: 90,
inCart:0
},
{
id: 11,
name: "Grey Jean Jacket",
image:"https://i.ibb.co/N71k1ML/grey-jean-jacket.png",
price: 90,
inCart:0
},
{
id: 12,
name: "Brown Shearling",
image:"https://i.ibb.co/s96FpdP/brown-shearling.png",
price: 165,
inCart:0
},
{
id: 13,
name: "Blue Tanktop",
image:"https://i.ibb.co/7CQVJNm/blue-tank.png",
price: 25,
inCart:0
},
{
id: 14,
name: "Floral Blouse",
image:"https://i.ibb.co/4W2DGKm/floral-blouse.png",
price: 20,
inCart:0
},
{
id: 15,
name: "Floral Dress",
image:"https://i.ibb.co/KV18Ysr/floral-skirt.png",
price: 80,
inCart:0
},
{
id: 16,
name: "Red Dots Dress",
image:"https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png",
price: 80,
inCart:0
},
{
id: 17,
name: "Camo Down Vest",
image:"https://i.ibb.co/xJS0T3Y/camo-vest.png",
price: 325,
inCart:0
},
{
id: 18,
name: "Floral T-shirt",
image:"https://i.ibb.co/qMQ75QZ/floral-shirt.png",
price: 20,
inCart:0
},
{
id: 19,
name: "Black & White Longsleeve",
image:"https://i.ibb.co/55z32tw/long-sleeve.png",
price: 25,
inCart:0
},
{
id: 20,
name: "Pink T-shirt",
image:"https://i.ibb.co/RvwnBL8/pink-shirt.png",
price: 25,
inCart:0
}
];
for (let i = 0; i < carts.length; i++){
carts[i].addEventListener("click", ()=>{
cartNumbers(products[i]);
totalCost(products[i]);
});
}
function onLoadCartNumbers(){
let productNumbers = localStorage.getItem("cartNumbers");
if(productNumbers){
document.querySelector(".item-count").textContent = productNumbers;
}
}
function cartNumbers(product){
let productNumbers = localStorage.getItem("cartNumbers");
productNumbers = parseInt(productNumbers);
if (productNumbers){
localStorage.setItem("cartNumbers", productNumbers + 1);
document.querySelector(".item-count").textContent = productNumbers + 1;
}else {
localStorage.setItem("cartNumbers", 1);
document.querySelector(".item-count").textContent = 1;
}
setItems(product);
}
function setItems(product){
let cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
if(cartItems !== null){
if (cartItems[product.name] === undefined){
cartItems = {
...cartItems,
[product.name]:product
}
}
cartItems[product.name].inCart += 1;
}else{
product.inCart = 1;
cartItems = {
[product.name]:product
}
}
localStorage.setItem("productsInCart",JSON.stringify(cartItems));
}
function totalCost(product){
var cartCost = localStorage.getItem("totalCost");
if(cartCost !== null){
cartCost = parseInt(cartCost);
localStorage.setItem("totalCost", cartCost + product.price);
}else{
localStorage.setItem("totalCost", product.price);
}
}
function displayCart(){
var cartCost = localStorage.getItem("totalCost");
let cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
let productContainer = document.querySelector(".output");
if( cartItems && productContainer ){
productContainer.innerHTML = "";
Object.values(cartItems).map(item =>{
productContainer.innerHTML += `
<div id="cartResult" class="cart-contain">
<div class="cart-header">
<div class="product">
<img src=${item.image}>
</div>
<div class="description">
<p >${item.name}</p></div>
<div class="quantity">
<button onclick="subtract()" class="add"><</button>
<p class="in-cart" id="cartCount">${item.inCart}</p>
<button onclick="add()" class="minus">></button>
</div>
<div class="price"><p>N ${item.price}.00</p></div>
<div class="remove"><button onclick="remove(cartResult)">⨯</button></div>
</div>
</div>
`
;
}
);
productContainer.innerHTML += `
<div class="total-container"><h3 class="total-title">TOTAL:</h3>
<h3 class="total">${cartCost}</h3
</div>
`
}
}
function remove() {
let productNumbers = localStorage.getItem("cartNumbers");
var myobj = document.querySelector("#cartResult");
myobj.remove();
}
function add(cartCount)
{
var increase = document.querySelector('.minus');
let productNumbers = localStorage.getItem("item.inCart");
productNumbers = parseInt(productNumbers);
if (productNumbers){
localStorage.setItem("item.inCart", productNumbers + 1);
document.querySelector("#cartCount").textContent = productNumbers + 1;
}else {
localStorage.setItem("item.inCart", 1);
document.querySelector("#cartCount").textContent = 1;
}
setItems(i);
}
function subtract(cartCount)
{
var decrease = document.querySelector('.add');
var productNumbers = localStorage.getItem("item.inCart");
productNumbers = parseInt(productNumbers);
if (productNumbers){
localStorage.setItem("item.inCart", productNumbers - 1);
document.querySelector("#cartCount").innerHTML = productNumbers - 1;
}else {
localStorage.setItem("item.inCart", 1);
document.querySelector("cartCount").textContent = 1;
}
setItems();
}
displayCart();
onLoadCartNumbers();
#import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&display=swap');
*{
box-sizing: border-box;
}
body{
font-family: 'Open Sans Condensed', sans-serif;
margin: 50px;
}
.shopping-icon{
width: 24px;
height: 24px;
}
.cart-icon .item-count{
position: absolute;
font-size: 10px;
font-weight: 700;
bottom: 12px;
}
.cart-icon{
color: #000;
width: 45px;
height: 45px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
header .option{
width: 100%;
height: 100%;
margin-top: -50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.collection-item {
width: 22vw;
height: 350px;
align-items: center;
position: relative;
}
.collection-page .items .collection-item {
margin-bottom: 30px;
}
.collection-item .image {
width: 100%;
height: 95%;
background-size: cover;
background-position: 50%;
margin-bottom: 5px;
}
.items{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
align-items: center;
}
.cart-button{
position: relative;
bottom: 110px;
width: 80%;
justify-content: center;
opacity: .7;
left: 10%;
right: 10%;
visibility: hidden ;
height: 50px;
letter-spacing: .5px;
line-height: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#inc{
outline: none;
border: none;
margin-left: 0px;
height: 15px;
width: 10px;
cursor: pointer;
color: transparent;
text-shadow: 0px 1px 0px #000;
}
.collection-item:hover .cart-button{
visibility: visible;
opacity: .9;
border: 1px solid #000;
}
.collection-item:hover .image{
opacity: .7;
}
.cart-button:hover{
background-color: #000;
color: #fff;
border:1px solid #000;
}
.collection-footer{
display: flex;
justify-content: space-between;
}
/*cart page*/
.cart-container{
max-width: 650px;
justify-content: space-around;
margin: 0 auto;
margin-top: 50px;
}
.cart-contain{
max-width: 650px;
justify-content: space-around;
margin: 0 auto;
margin-top: 50px;
}
.cart-heading{
width: 100%;
max-width: 650px;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #000;
margin: 0 auto;
}
.cart-header{
width: 100%;
max-width: 650px;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #000;
margin: 0 auto;
}
.product{
width: 30%;
}
.product img{
margin-top: 40px;
height: 200px;
width: 150px;
}
.description{
width: 20%;
display: flex;
align-items: center;
}
.description p{
font-size: 1.3rem;
}
.quantity{
width: 30%;
display: flex;
align-items: center;
display: flex;
justify-content: space-around;
}
.price{
width: 20%;
display: flex;
align-items: center;
}
.price p{
font-size: 1.3rem;
}
.remove{
width: 20%;
display: flex;
align-items: center;
}
.in-cart{
font-size: 1.3rem;
}
.add{
font-size: 30px;
cursor: pointer;
font-weight: bold;
border: none;
background-color: transparent;
outline: none;
}
.minus{
font-size: 30px;
cursor: pointer;
font-weight: bold;
border: none;
background-color: transparent;
outline: none;
}
.remove button{
font-size:30px;
cursor: pointer;
border: none;
background-color: transparent;
outline: none;
}
.test-warning{
text-align: center;
margin-top: 40px;
font-size: 24px;
color: red;
}
.total-container{
display: flex;
justify-content: flex-end;
width: 100%;
padding: 10px 0;
}
.total-title{
width: 20%;
}
.total{
width: 10%;
}
.StripeCheckout{
overflow: hidden;
display: inline-block;
background: linear-gradient(rgb(40, 160, 229), rgb(1, 94, 148));
border: 0px;
padding: 1px;
text-decoration: none;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px;
cursor: pointer;
visibility: visible;
user-select: none;
margin-left: 50%;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>CRWN Clothing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript"src="index.js"></script>
</head>
<body>
<header>
<div class="logo">
<a class="logo-container" href="index.html">
<svg width="50px" height="39px" viewBox="0 0 50 39" class="logo"><title>Group</title><desc>Created with Sketch.</desc><g id="WiP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard" transform="translate(-90.000000, -38.000000)"><g id="Group" transform="translate(90.000000, 38.000000)"><polygon id="Rectangle" fill="#808282" points="3 14 25 26.5 47 14 40.855176 39 9.08421785 39"></polygon><polygon id="Triangle" fill-opacity="0.262838724" fill="#101A1A" points="25 8 40 39 10 39"></polygon><circle id="Oval" fill="#5E6363" cx="2" cy="9" r="2"></circle><circle id="Oval" fill="#5E6363" cx="25" cy="2" r="2"></circle><circle id="Oval" fill="#5E6363" cx="48" cy="9" r="2"></circle>
</g></g></g>
</svg>
</a>
</div>
<div class="option" onclick="location.href='./cart.html'">
<div class="cart-icon" onclick="location.href='./cart.html'">
<svg id="Capa_1" x="0px" y="0px" viewBox="0 0 407.453 407.453" xml:space="preserve" class="shopping-icon"><g><path d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486 c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z" style="fill: rgb(1, 0, 2);"></path><path d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243 v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391 c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386 C375.191,103.891,371.557,100.258,367.062,100.258z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0 c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394 c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274 C274.461,131.163,278.095,134.796,282.59,134.796z" style="fill: rgb(1, 0, 2);"></path><path d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907 c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129 c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z" style="fill: rgb(1, 0, 2);"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
<span class="item-count"> 0 </span>
</div>
</div>
</header>
<main>
<div class="collection-page">
<center><h1>Hats</h1></center>
<div class="items">
<div class="collection-item">
<div class="image" style="background-image: url("https://i.ibb.co/ZYW3VTp/brown-brim.png");"></div><div class="collection-footer"><span class="name">Brown Brim</span><span class="price">N25</span></div>
<button class="cart-button" >Add to cart</button></div>
<div class="collection-item">
<div class="image" style="background-image: url("https://i.ibb.co/ypkgK0X/blue-beanie.png");"></div>
<div class="collection-footer"><span class="name">Blue Beanie</span><span class="price">N18</span></div>
<button class="cart-button" >Add to cart</button></div>
<div class="collection-item">
<div class="image" style="background-image: url("https://i.ibb.co/QdJwgmp/brown-cowboy.png");"></div>
<div class="collection-footer"><span class="name">Brown Cowboy</span><span class="price">N35</span>
</div>
<button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/RjBLWxB/grey-brim.png");"></div>
<div class="collection-footer"><span class="name">Grey Brim</span><span class="price">N25</span></div><button class="cart-button" >Add to cart</button></div></div>
<center><h1 class="title">SNEAKERS</h1></center>
<div class="items">
<div class="collection-item">
<div class="image" style="background-image: url("https://i.ibb.co/0s3pdnc/adidas-nmd.png");"></div>
<div class="collection-footer"><span class="name">Adidas NMD</span><span class="price">N220</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/dJbG1cT/yeezy.png");"></div><div class="collection-footer"><span class="name">Adidas Yeezy</span><span class="price">N280</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/bPmVXyP/black-converse.png");"></div><div class="collection-footer"><span class="name">Black Converse</span><span class="price">N110</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/1RcFPk0/white-nike-high-tops.png");"></div><div class="collection-footer"><span class="name">Nike White AirForce</span><span class="price">N160</span></div><button class="cart-button" >Add to cart</button></div></div>
<center><h1 class="title">JACKETS</h1></center>
<div class="items"><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/XzcwL5s/black-shearling.png");"></div><div class="collection-footer"><span class="name">Black Jean Shearling</span><span class="price">N125</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/mJS6vz0/blue-jean-jacket.png");"></div><div class="collection-footer"><span class="name">Blue Jean Jacket</span><span class="price">N90</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/N71k1ML/grey-jean-jacket.png");"></div><div class="collection-footer"><span class="name">Grey Jean Jacket</span><span class="price">N90</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/s96FpdP/brown-shearling.png");"></div><div class="collection-footer"><span class="name">Brown Shearling</span><span class="price">N165</span></div><button class="cart-button" >Add to cart</button></div></div>
<center><h1 class="title">WOMEN</h1></center>
<div class="items"><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/7CQVJNm/blue-tank.png");"></div><div class="collection-footer"><span class="name">Blue Tanktop</span><span class="price">N25</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/4W2DGKm/floral-blouse.png");"></div><div class="collection-footer"><span class="name">Floral Blouse</span><span class="price">N20</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/KV18Ysr/floral-skirt.png");"></div><div class="collection-footer"><span class="name">Floral Dress</span><span class="price">N80</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png");"></div><div class="collection-footer"><span class="name">Red Dots Dress</span><span class="price">N80</span></div><button class="cart-button" >Add to cart</button></div></div>
<center><h1 class="title">MEN</h1></center>
<div class="items">
<div class="collection-item">
<div class="image" style="background-image: url("https://i.ibb.co/xJS0T3Y/camo-vest.png");"></div>
<div class="collection-footer"><span class="name">Camo Down Vest</span><span class="price">N325</span></div>
<button class="cart-button">Add to cart</button></div>
<div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/qMQ75QZ/floral-shirt.png");"></div><div class="collection-footer"><span class="name">Floral T-shirt</span><span class="price">N20</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/55z32tw/long-sleeve.png");"></div><div class="collection-footer"><span class="name">Black & White Longsleeve</span><span class="price">N25</span></div>
<button class="cart-button" >Add to cart</button></div>
<div class="collection-item"><div class="image" style="background-image: url("https://i.ibb.co/RvwnBL8/pink-shirt.png");"></div>
<div class="collection-footer"><span class="name">Pink T-shirt</span><span class="price">N25</span></div>
<button class="cart-button" >Add to cart</button>
</div>
</div>
</div>
</main>
</body>
<script type="text/javascript"src="index.js"></script>
</html>

You are using the cart-contain class to identify an object and remove it. Since you have multiple items with that same class, whenever you click on any 'remove' button, it finds the first item with class cart-contain and removes it.
You want some unique identifier, which you add as an id to every .cart-contain item. Then you can refer to that id when you click remove.
<div id="SOME_ID_HERE" class="cart-contain">
<button onclick="remove(SOME_ID_HERE)">
function remove(id) {
let productNumbers = localStorage.getItem("cartNumbers");
var myobj = document.querySelector(id);
myobj.remove();
}

Modal on button click does not display

Trying to launch a modal upon a button click. I can console.log "button clicked" but the modal will not display. Please help me find where I am going wrong. Been looking for a while but I am somehow overlooking the error. Thank you.
The full code can be found at this Codepen: https://codepen.io/centem/pen/BaajLZm
var app = angular.module('myApp', []);
app.controller('myController',
function ($scope, $http) {
$scope.list = [
{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0,0,0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header > div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button id="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

OK first of all the Edit button is inside a ng-repeat which will create so many buttons and all of them with the same ID which is not valid as each element must have a unique id.
Secondly the button as is created inside angulars's context is not accessible to you getElementById as that is executed even before the button is rendered. And as you button clicked function is bound to window so it logs. Below is a sample code that works fine. Just create a function inside controller that opens the modal. Below is a working sample.
var app = angular.module('myApp', []);
app.controller('myController',
function($scope, $http) {
$scope.list = [{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
$scope.openModal = function() {
debugger
modal.style.display = "block";
}
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0, 0, 0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover>ul,
ul li:focus-within>ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header>div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Hope this helps :)

Develop Reference

JavaScript is the programming language of the Web.

Issue with Selection dropdown when it is 'required' - javascript

Related

Json data not displayed because of a syntax error

I can't make the books slider

Json data render onclick with different content

Increase, decrease and remove buttons do not work properly [duplicate]

Modal on button click does not display

Categories

Resources