Develop Reference

Change a button onclick href based on multiple IDs

I have an order summary. The order summary is a collection of 5 different HTML IDs based on user selection. I'm trying to get the "checkout button" to link to different URLs based on different configurations corresponding to different HTML IDs.
For example, if the user selects "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES" the checkout button would take them to a specific URL and so on specific for that selection. If they make a different selection, they should be taken to a different URL.
I'm assuming a for loop and if... else statement would do the trick but I can't seem to figure it out. I feel like I'm close but maybe I'm way off.
What I currently have:
// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
let checkoutBtnClick = document.querySelectorAll("#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type").innerHTML;
if (checkoutBtnClick === "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://www.google.com/"');
} else if (checkoutBtnClick === "BRAZIL", "2 BAGS", "GROUND", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://www.facebook.com/"');
}
}
/* ORDER SUMMARY */
.container-summary {
display: flex;
border: 3px solid none;
justify-content: center;
margin-bottom: 50px;
font-family: 'lato', sans-serif;
}
.box-summary {
height: 20.5rem;
width: 30rem;
background: #eee;
border-radius: 6px;
}
.box-summary-title {
display: flex;
justify-content: center;
font-size: 20px;
font-weight: 600;
letter-spacing: .03rem;
margin-top: 25px;
color: #433d3d;
line-height: .95em;
}
.box-summary-block {
display: flex;
justify-content: space-around;
margin: 1rem 3rem;
font-size: 13px;
font-weight: 600;
letter-spacing: .03rem;
line-height: 1.9em;
color: #393939;
}
.box-summary-block-coffee {
display: flex;
justify-content: center;
margin: 1rem 4rem;
font-size: 13px;
font-weight: 600;
letter-spacing: .03rem;
line-height: 1.9em;
color: #393939;
}
.box-summary-option-coffee {
margin-left: .75rem;
}
.box-summary-block-right {
text-align: end;
}
.box-summary-category2-left,
.box-summary-category2-right {
margin-top: .6em;
}
.box-summary-option-bags,
.box-summary-option-grind,
.box-summary-option-delivery,
.box-summary-option-roast,
.box-summary-option-coffee {
color: #3e718a;
}
.box-summary-shipment-plus-price {
display: flex;
justify-content: space-evenly;
margin-left: 60px;
margin-right: 60px;
margin-bottom: 10px;
margin-top: 20px;
font-size: 15px;
font-weight: 600;
letter-spacing: .03rem;
line-height: .95em;
color: #433d3d;
}
.box-summary-order-button-container {
display: flex;
justify-content: center;
}
.box-summary-order-button {
padding: 15px 30px 15px 30px;
font-size: 15px
}
<!--ORDER SUMMARY CONTAINER-->
<div class="container-summary">
<div class="box-summary">
<div class="box-summary-title">
ORDER SUMMARY
</div>
<div class="box-summary-block-coffee">
COFFEE SELECTION: <span class="box-summary-option-coffee" id="change-coffee">BRAZIL</span>
</div>
<div class="box-summary-block">
<div class="box-summary-block-left">
<div class="box-summary-category1-left">
# OF BAGS
</div>
<div class="box-summary-option-bags" id="change-bag">
2 BAGS
</div>
<div class="box-summary-category2-left">
GRIND TYPE
</div>
<div class="box-summary-option-grind" id="change-grind-type">
WHOLE BEAN
</div>
</div>
<div class="box-summary-block-right">
<div class="box-summary-category1-right">
DELIVERY
</div>
<div class="box-summary-option-delivery" id="change-delivery">
EVERY 4 WEEKS
</div>
<div class="box-summary-category2-right">
ROAST TYPE
</div>
<div class="box-summary-option-roast" id="change-roast-type">
ALL ROAST TYPES
</div>
</div>
</div>
<div class="box-summary-order-summary">
<div class="box-summary-shipment-plus-price">
<span class="box-summary-price-per-shipment">
PRICE PER SHIPMENT:
</span>
<span class="box-summary-order-price" id="box-summary-total-price">
$90
</span>
</div>
<div class="box-summary-order-button-container">
<button class="box-summary-order-button" id="box-summary-checkout-button" onclick="checkoutButton()">
CONTINUE TO CHECKOUT
</button>

I think what you're looking for, is something like this :
// List Shopify codes for all possible variations as a hierarchical object
let variations = {
// coffee
"BRAZIL" : {
// bag
"2 BAGS" : {
// delivery
"EVERY 4 WEEKS" : {
// roast type
"ALL ROAST TYPES" : {
// grind type
"WHOLE BEAN" :"42755456106732:1",
"GROUND" :"42755456106500:1",
...
},
...
},
...
},
...
},
...
};
// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
// Select each node you want to process
let coffee = document.getElementById("change-coffee").innerHTML.trim().toUpperCase();
let bag = document.getElementById("change-bag").innerHTML.trim().toUpperCase();
let delivery = document.getElementById("change-delivery").innerHTML.trim().toUpperCase();
let roastType = document.getElementById("change-roast-type").innerHTML.trim().toUpperCase();
let grindType = document.getElementById("change-grind-type").innerHTML.trim().toUpperCase();
try {
// Go find the Shopify code
// If only grindType is not known, this returns 'undefined'
// If any of the other values are not known, this triggers an error
// The order of the variables should match the order in your hierarchical object
let shopifyCode = variations[coffee][bag][delivery][roastType][grindType];
if(typeof shopifyCode === 'undefined') {
// Now you also throw an error if just grindType is not known
throw "shopifyCode can't be undefined";
}
// Build your URL
const URL = `https://www.server.com/thepartthatstaysthesame/${shopifyCode}`;
// Display URL in console (useful for testing purposes)
console.log(URL);
// Visit the URL you just created
window.location.href = URL;
} catch (error) {
// Do your error handling here
console.error('Variation unknown');
}
}

You can use a map.
Also recommended to use addEventListener
Note the spread operator [...] to make an array of the node list to map
I also assume the IDs we are looking for all start with change
// CHECKOUT BUTTON CONDITIONALS
document.getElementById("box-summary-checkout-button").addEventListener("click", () => {
const parms = [...document.querySelectorAll("[id^=change]")]
.map(div => `${div.id}=${div.textContent.trim().replace(/ /g,"+")}`);
const url = `https://www.server.com/someprocesses?${parms.join("&")}`;
console.log(url);
//window.location.href = url;
})
/* ORDER SUMMARY */
.container-summary {
display: flex;
border: 3px solid none;
justify-content: center;
margin-bottom: 50px;
font-family: 'lato', sans-serif;
}
.box-summary {
height: 20.5rem;
width: 30rem;
background: #eee;
border-radius: 6px;
}
.box-summary-title {
display: flex;
justify-content: center;
font-size: 20px;
font-weight: 600;
letter-spacing: .03rem;
margin-top: 25px;
color: #433d3d;
line-height: .95em;
}
.box-summary-block {
display: flex;
justify-content: space-around;
margin: 1rem 3rem;
font-size: 13px;
font-weight: 600;
letter-spacing: .03rem;
line-height: 1.9em;
color: #393939;
}
.box-summary-block-coffee {
display: flex;
justify-content: center;
margin: 1rem 4rem;
font-size: 13px;
font-weight: 600;
letter-spacing: .03rem;
line-height: 1.9em;
color: #393939;
}
.box-summary-option-coffee {
margin-left: .75rem;
}
.box-summary-block-right {
text-align: end;
}
.box-summary-category2-left,
.box-summary-category2-right {
margin-top: .6em;
}
.box-summary-option-bags,
.box-summary-option-grind,
.box-summary-option-delivery,
.box-summary-option-roast,
.box-summary-option-coffee {
color: #3e718a;
}
.box-summary-shipment-plus-price {
display: flex;
justify-content: space-evenly;
margin-left: 60px;
margin-right: 60px;
margin-bottom: 10px;
margin-top: 20px;
font-size: 15px;
font-weight: 600;
letter-spacing: .03rem;
line-height: .95em;
color: #433d3d;
}
.box-summary-order-button-container {
display: flex;
justify-content: center;
}
.box-summary-order-button {
padding: 15px 30px 15px 30px;
font-size: 15px
}
<!--ORDER SUMMARY CONTAINER-->
<div class="container-summary">
<div class="box-summary">
<div class="box-summary-title">
ORDER SUMMARY
</div>
<div class="box-summary-block-coffee">
COFFEE SELECTION: <span class="box-summary-option-coffee" id="change-coffee">BRAZIL</span>
</div>
<div class="box-summary-block">
<div class="box-summary-block-left">
<div class="box-summary-category1-left">
# OF BAGS
</div>
<div class="box-summary-option-bags" id="change-bag">
2 BAGS
</div>
<div class="box-summary-category2-left">
GRIND TYPE
</div>
<div class="box-summary-option-grind" id="change-grind-type">
WHOLE BEAN
</div>
</div>
<div class="box-summary-block-right">
<div class="box-summary-category1-right">
DELIVERY
</div>
<div class="box-summary-option-delivery" id="change-delivery">
EVERY 4 WEEKS
</div>
<div class="box-summary-category2-right">
ROAST TYPE
</div>
<div class="box-summary-option-roast" id="change-roast-type">
ALL ROAST TYPES
</div>
</div>
</div>
<div class="box-summary-order-summary">
<div class="box-summary-shipment-plus-price">
<span class="box-summary-price-per-shipment">
PRICE PER SHIPMENT:
</span>
<span class="box-summary-order-price" id="box-summary-total-price">
$90
</span>
</div>
<div class="box-summary-order-button-container">
<button class="box-summary-order-button" id="box-summary-checkout-button">
CONTINUE TO CHECKOUT
</button>

How to remove the class when the element is clicked again JS

I have accordion block.
When you click on an inactive item, it becomes active.
The active class is removed from the previous item.
It all works.
But now I needed to make it so that when you click on the active item again, it becomes inactive again.
I also have a function so that hiding / opening items happens without jerks.
But it doesn't work with the current JS code:
function setHeight() {
if (content.offsetHeight) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
How can I do that?
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', (event) => {
accordItems.forEach(item => {
item.classList.remove('active');
});
item.classList.add('active');
});
});
#import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item.active {
height: 100%; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
overflow: hidden;
transition: height .5s; }
.accordion__item.active > .accordion__header .accordion__icon {
transform: rotate(45deg); }
.accordion__item.active > .accordion__content {
margin-bottom: 1.2rem;
height: 100%; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item active">
<div class="accordion__header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>

Can you do something like this?
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', (event) => {
const wasActive = item.classList.contains('active');
accordItems.forEach(item => {
item.classList.remove('active');
});
if (!wasActive) {
item.classList.add('active');
}
});
});
This makes a clicked item active only if it wasn't active when the click occurred. Toggling is another option, if you are okay with more than one item being active at the same time:
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', (event) => {
item.classList.toggle('active');
});
});

Instead of adding and removing class you can use a shorthand syntax toggle it makes things easier.
It remove the class if the class is present vice versa
Here's the code for it
item.classList.toggle('active')
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', (event) => {
accordItems.forEach(item => {
item.classList.toggle('active');
});
item.classList.add('active');
});
});

i am able to get form data values when i call a javascript class on a first instance but not on subsequent instances

I know i have submitted quite a long code, and could have shortened it, however i feel that it is better i put it up all of it because it is related.
i have spent the last four days figuring out what could be wrong unsuccessfully.
I have even tried to edit the code in chrome dev tools and put line breaks unsuccessfully.
I have four choices of types of properties a user can select when they visit our website.
i.e a House or a land.
This is shown below.
<div class="container">
<div class="house">
<img src="../house_image.jfif" alt="house image" class="square-image" id="house-image">
<h3 class="list-type" id ="list-type-house">Looking for a house to let, buy or fullyFurnished ?</h3>
</div>
<div class="land">
<img src="../land_image.jpg" alt="land image" class="square-image">
<h3 class="list-type" id ="list-type-land">Looking for Land or a plot ?</h3>
</div>
<div class="hotel">
<img src="../hotel_image.jfif" alt="hotel image" class="square-image">
<h3 class="list-type" id ="list-type-hotel">Looking for hotel ?</h3>
</div>
<div class="godown">
<img src="../godown_image.jpg" alt="godown image" class="square-image">
<h3 class="list-type" id ="list-type-godown">Looking for a commercial space or a down ?</h3>
</div>
</div><!---container-->
when a user clicks a house for example i listen to the click using an addEvent listener.
then i run this code
const propertyChoice = document.querySelectorAll('.list-type');
for (const propertyType of propertyChoice) {
propertyType.addEventListener('click',propertyChoiceObj);
}
function propertyChoiceObj(e) {
e.stopPropagation();
const choice = e.target.id;
switch(choice) {
case "list-type-house":
App.init();
break;
case "list-type-land":
listTypeLand();
break;
case "list-type-hotel":
listTypeHotel();
break;
case "list-type-godown":
listTypeGodown();
break;
default:
alert("select one type of property to list");
break;
}
}
The App.init class above initializes a class shown below called modalOne, the Modal one class runs a method called listTypeHouse which opens up a modal pop up on . the modal pop up which creates an overlay on the whole page is controlled by css as shown below.
let me start with the class instances
class ModalPopUp{
constructor(modal_wrapper,modal_window,overlay,modal_close,expand,submit,formId){
this.modalWrapper = document.getElementById(modal_wrapper);
this.modalWindow = document.getElementById(modal_window);
this.overlay = overlay;
this.modalClose = modal_close;
this.expand = expand;
this.clicK = 'click';
this.keyDown= 'keydown';
this.submit = submit;
this.formId = formId;
document.getElementById(this.modalClose).addEventListener(this.clicK, this.closeModal.bind(this,
this.modalWrapper));
document.getElementById(this.expand).addEventListener(this.clicK, expandModalTwo.bind(this));
document.getElementById(this.formId).addEventListener(this.submit, this.validate);
document.addEventListener(this.clicK, this.clickHandler.bind(this));
document.addEventListener(this.keyDown, this.keyHandler);
}
listTypeHouse(e){
this.modalWrapper.className = this.overlay;
this.modalWindow.style.marginTop = (-this.modalWindow.offsetHeight)/2 + "px";
this.modalWindow.style.marginLeft = (-this.modalWindow.offsetWidth)/2 + "px";
};
closeModal(th)
{
this.modalWrapper.className = "";
};
clickHandler(e) {
console.log(e);
if(e.target.tagName == "DIV") {
if(e.target.id != this.modal_window){
modal_wrapper.className = "";
}
e.preventDefault();
}
};
keyHandler (e) {
if(e.keyCode == 27) {
modal_wrapper.className = "";
e.preventDefault();
}
}
validate(e){
e.preventDefault();
const formData = new FormData(this)
for (const formDat of formData) {
console.log(formDat);
}
}
}
function expandModalTwo(e){
e.preventDefault();
console.log('expand model');
e.stopPropagation();
if(this.overlay == 'overlay'){
this.modalWrapper.className = "";
let modalTwo = new
ModalPopUp('modal_wrapper_two','modal_window_two','overlay_two','modal_close_two','expand-
two','submit-two','modal_feedback_two');
modalTwo.listTypeHouse();
}else if(this.overlay == 'overlay_two'){
this.modalWrapper.className = "";
let modalThree = new
ModalPopUp('modal_wrapper_three','modal_window_three','overlay_three','modal_close_three','expand-
three','submit-three','modal_feedback_three');
modalThree.listTypeHouse();
}
}
class App {
static init(){
let modalOne = new ModalPopUp('modal_wrapper','modal_window','overlay','modal_close','expand','submit','modal_feedback');
modalOne.listTypeHouse();
}
}
The HTML form that is opened by modalPopup is shown below. I have removed some input forms to make it shorter.
<div id="modal_wrapper" class="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p class="better-exp-p" id="better-exp-p">Select House Type:</p>
<form id="modal_feedback" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span class="buy-let-furnished">
<label for="buy" class="buy-let-furnished-label">Buy</label>
<input class="selector" id="buy" name="buy-let-furnished" type="radio" value="1">
<label for="let" class="buy-let-furnished-label">Let</label>
<input class="selector" id="let" name="buy-let-furnished" type="radio" value="2">
<label for="let" class="buy-let-furnished-label">Fully Furnished</label>
<input class="selector" id="furnished" name="buy-let-furnished" type="radio" value="3">
</span>
<button type="submit" class="better-exp-p submit" id="submit" name="feedbackForm" value="submit">Search</button>
<input type="button" id="expand" name="feedback-expand-Form" value="More Detailed Search">
</form>
</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->
<!-- modal two ----------------------------------------->
<div id="modal_wrapper_two">
<div id="modal_window_two">
<div style="text-align: right;"><a id="modal_close_two" href="#">close <b>X</b></a></div>
<p class="better-exp-p-two" id="better-exp-p-two">Select more options here:</p>
<form id="modal_feedback_two" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span>
<label for="swimming-Pool" class="check-boxes">Swimming Pool</label>
<input class="selector check " id="swimming-Pool" name="swimming-Pool" type="checkbox" value="1">
</span>
<span>
<label for="Fiber-Cable" class="check-boxes">Fibre cable</label>
<input class="selector check" id="Fiber-Cable" name="Fiber-Cable" type="checkbox" value="1">
</span>
<button class="better-exp-p-two submit" id="submit-two" type="submit" name="feedbackForm-two"
value="Search"> Search </button>
<input type="button" id="expand-two" name="feedback-expand-Form-two" value="Narrow Down your search
further">
</form>
</div> <!-- #modal_window_two -->
</div> <!-- #modal_wrapper_two -->
<!-- modal three ----------------------------------------->
<div id="modal_wrapper_three">
<div id="modal_window_three">
<div style="text-align: right;"><a id="modal_close_three" href="#">close <b>X</b></a></div>
<h3 class="better-exp-p-three" id="better-exp-p-three">Select more options here:</h3>
<form id="modal_feedback_three" method="POST" action="#" accept-charset="UTF-8">
<section class="modal-feedback-three-top">
<span>
<label for="bathrooms" class="check-boxes">Bath Rooms</label>
<input class="selector" id="bathrooms" name="bathrooms" type="text" value="">
</span>
<span>
<label for="bed-with-bath" class="text-boxes">Bedrooms with Bathrooms</label>
<input class="selector" id="bedwithbath" name="bedwithbath" type="text" value="">
</span>
</section>
<section class="modal-feedback-three-search">
<button id="submit-three" type="submit" name="feedback-expand-Form-three"
value="submit">submit</button>
<input type="hidden" id="expand-three" name="feedback-expand-Form-three" value=""><!-- hidden to
allow use of class-->
</section>
</form>
</div> <!-- #modal_window_three -->
</div> <!-- #modal_wrapper_three -->
The simple css class that opens up the modal pop up window is shown below.
/* the first modal pop up */
#modal_wrapper.overlay::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
}
#modal_window {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#modal_wrapper.overlay #modal_window {
display: block;
}
#modal_feedback{
display: grid;
justify-content: center;
align-items: center;
grid-auto-rows: 2.5em;
font-size: medium;
background-color: rgb(235, 236, 238);
color: rgb(219, 76, 76);
font-weight: normal;
justify-items: center;
}
/* .buy-let-furnished{
display: grid;
/* grid-template-columns: 20px auto;
} */
.better-exp-p{
color: brown;
font-size: large;
font-weight: normal;
display: flex;
justify-content: center;
}
#expand{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: flex;
justify-content: center;
text-align: center;
}
.min-max-cost{
display: grid;
grid-auto-flow: column;
grid-auto-columns: repeat(auto-fill, 100px);
justify-items: center;
align-items: center;
}
.Bedrooms{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
.complete-offplan{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
.gated-slone-apart{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
.buy-let-furnished{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
/* second modal pop up */
#modal_wrapper_two.overlay_two::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
}
#modal_window_two {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#modal_wrapper_two.overlay_two #modal_window_two {
display: block;
}
#modal_feedback_two{
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-auto-rows: 2.5em;
font-size: medium;
background-color: rgb(235, 236, 238);
color: rgb(219, 76, 76);
font-weight: normal;
justify-items: start;
}
.area{
display: grid;
}
.better-exp-p-two{
display: grid;
grid-column:span 2 ;
color: brown;
font-size: large;
font-weight: normal;
align-self:center;
justify-self: center;
}
#expand-two{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: grid;
grid-column:span 2 ;
align-self:center;
justify-self: center;
}
/* third modal pop up */
#modal_wrapper_three.overlay_three::before{
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
}
#modal_window_three {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#modal_wrapper_three.overlay_three #modal_window_three {
display: block;
}
#test{
display: none;
}
.modal-feedback-three-top{
display: grid;
justify-content: center;
grid-template-columns: auto ;
align-items: center;
grid-auto-rows: 2.5em;
font-size: medium;
background-color: rgb(235, 236, 238);
color: rgb(219, 76, 76);
font-weight: normal;
justify-items: start;
}
.modal-feedback-three-top
.selector{
max-width: 100px;
}
.modal-feedback-three-lower{
display: grid;
grid-template-columns: 1fr;
/* justify-content: center;
align-items: center; */
}
The code works fine, when a user clicks a submit button with an id of submit , i get the form data values. by when the user clicks on expand button to display the second modal pop up form, when i try to submit form there using id submit-two, the form suddenly disappears as if it has submitted and i don't get the form data values.
The same problem happens in modal three where i don't get the form values.
I made the three optional pop up forms so that the user can submit the form in whatever stage he fill like of the three, additionally i did not want to have a very big input form that would make the user feel am asking for too much information.
The code is available here
https://codepen.io/gitaumartin/pen/QWwrYgx?editors=1111

How can I create a list where I can add and remove inputs via buttons?

I've an idea. For this I need a list like this draw:
So the main idea is to have a plus and a minus button. When a users presses the plus button, another input get's added. When pressing the minus button beside each input, the related input should be removed.
So I've startet with this here but I'm not very with it and the functionality is not given yet. How can I deal with this a smart way? Is there a problem with the id's? I mean I could copy a row or insert it (with JS) but how can I get the values later of all inputs in one map (with JS) for example? A lot of questions..
.out-task {
display: flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background: red;
}
.button {
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.add-task-button {
background: green;
}
<div class="wrapper">
<label>Tasks</label>
<div id="tasks-wrapper">
<div class="out-task">
<input type="text" id="task" name="task" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
<span class="add-task-button button">+</span>
</div>
Thanks for helping me out!!!

As I have criticized everyone, I let you do the same on my code:
const ListTasks = document.querySelector('#wrapper > div')
, PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
, taskWrapper = document.querySelector('#template > div')
;
ListTasks.onclick=e=>
{
if (e.target.classList.contains('add-task-button'))
{
let newTask = taskWrapper.cloneNode(true)
ListTasks.insertBefore(newTask, PosInsertTask)
}
else if (e.target.classList.contains('delete-task-button'))
{
ListTasks.removeChild(e.target.closest('.out-task'))
}
}
.out-task {
display : flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background : red;
}
.button {
width : 30px;
height : 30px;
display : block;
border-radius : 50%;
color : white;
display : flex;
justify-content: center;
align-items : center;
cursor : pointer;
font-weight : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
background: green;
margin: auto;
}
#template { display: none;}
<div id="wrapper">
<h4>Tasks</h4>
<div>
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
<span class="add-task-button button">+</span>
</div>
</div>
<div id="template">
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
</div>

Logo moves when js script inserts text in paragraph

The main problem is that my logo that is positioned next to the title with a negative margin and when a user fills in a username and proceeds the logo jumps down probably because text is inserted in the paragraph. But I can't find a solution to fix this.
HTML:
#logo{
display: flex;
flex-flow: row;
margin-top: -2.9rem;
margin-left: 11rem;
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
justify-content: space-between;
float: left;
vertical-align: top;
position:absolute;
}
#logo>img{
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<header>
<div id="hoofding">
<div id="titel">
<h1>Sudoku</h1>
</div>
<div id="home" >
<div id="Welkom">
<p id="afmeldennaam" class="hidden"></p>
</div>
<a id="afmelden" class="hidden">Logout</a>
</div>
</div>
<nav class="hidden" id="navigatie">
<ul>
<!--<li>Home</li>-->
<li>Sudoku</li>
<li>Highscores</li>
</ul>
</nav>
</header>
<div id="logo">
<img src="assets/media/logo.png" alt="logo" class="visible-lg">
</div>

You should locate the logo/image in the same containing element (#hoofding) as the title. Then use relative positioning to position it outside of the element.
Here's a contrived example.
function locate( selector, base ) {
base = base && 1 === base.nodeType ? base : document;
return base.querySelector( selector );
}
var btn = locate( 'button' ),
hb = locate( '.header-bottom' ),
user = locate( '.user' );
btn.addEventListener( 'click', function ( e ) {
hb.classList.toggle( 'hide' );
user.classList.toggle( 'hide' );
} );
body {
margin: 0;
}
header {
}
.header-top,
.header-bottom {
display: flex;
height: 75px;
align-items: center;
}
.header-top {
padding: 0 1rem;
color: white;
background-color: black;
}
.header-top a {
color: white;
}
.user {
flex-grow: 1;
text-align: right;
}
.header-bottom {
justify-content: center;
}
.hb-item {
margin: 0 1rem;
padding: 0.5rem 1rem;
color: white;
background-color: teal;
border-radius: 0.25rem;
}
h1 {
margin: 0;
color: teal;
}
.logo {
display: block;
transform: rotate( -13deg );
position: relative;
top: 25px;
left: 15px;
}
.hide {
display: none;
}
<header>
<div class="header-top">
<h1>Sudoku</h1>
<img class="logo" src="http://placehold.it/100x100/fc0">
<div class="user hide">
<span>Welcome User!</span>Logout
</div>
</div>
<div class="header-bottom hide">
<div class="hb-item">One</div>
<div class="hb-item">Two</div>
</div>
</header>
<main>
<button>Click Me!</button>
</main>

Use the id='logo' inside the id="hoofding".
Put the id='logo' after the id="titel".
The id='logo' doesn't need flex attributes.
The id='logo' doesn't need the float attribute.
The id='logo' doesn't need the flex-flow attribute.
Use the transform: rotate(-15deg); in the img tag, not in the id='logo'.
Delete the margins left and top from the id='logo'.
You can use about margin-top: 15px; in the img tag.

If you place the logo into the title div then it will work, all you have to do then is just adjust the margins and padding.
example:
HTML
<nav>
<div class="brand">
<h3>LogoName</h3>
<img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt="">
</div>
</nav>
CSS
nav{
background-color: black;
height: 50px;
}
.brand{
position: relative;
}
.brand h3{
display: inline;
color: white;
}
https://jsfiddle.net/q24L6ct4/2/