This is my first question here at stackOverFlow.
https://www.techiesys.in/websites/surya/shop-single.html
Please check the demo here. The codes are working fine, I know I did the worst coding.
I will put the code snippet here.
const changeItem1 = document.getElementById("changeitem1");
const changeItem2 = document.getElementById("changeitem2");
const changeItem3 = document.getElementById("changeitem3");
const changeItem4 = document.getElementById("changeitem4");
function firstChange() {
changeItem1.classList.remove("d-none");
changeItem2.classList.add("d-none");
changeItem3.classList.add("d-none");
changeItem4.classList.add("d-none");
}
function secondChange() {
changeItem2.classList.remove("d-none");
changeItem1.classList.add("d-none");
changeItem3.classList.add("d-none");
changeItem4.classList.add("d-none");
}
function thirdChange() {
changeItem3.classList.remove("d-none");
changeItem1.classList.add("d-none");
changeItem2.classList.add("d-none");
changeItem4.classList.add("d-none");
}
function fourthChange() {
changeItem4.classList.remove("d-none");
changeItem1.classList.add("d-none");
changeItem2.classList.add("d-none");
changeItem3.classList.add("d-none");
}
const changeFramee1 = document.getElementById("changeframee1");
const changeFramee2 = document.getElementById("changeframee2");
const changeFramee3 = document.getElementById("changeframee3");
const changeFramee4 = document.getElementById("changeframee4");
function f1Change() {
changeFramee1.classList.remove("d-none");
changeFramee2.classList.add("d-none");
changeFramee3.classList.add("d-none");
changeFramee4.classList.add("d-none");
}
function f2Change() {
changeFramee2.classList.remove("d-none");
changeFramee1.classList.add("d-none");
changeFramee3.classList.add("d-none");
changeFramee4.classList.add("d-none");
}
function f3Change() {
changeFramee3.classList.remove("d-none");
changeFramee1.classList.add("d-none");
changeFramee2.classList.add("d-none");
changeFramee4.classList.add("d-none");
}
function f4Change() {
changeFramee4.classList.remove("d-none");
changeFramee1.classList.add("d-none");
changeFramee2.classList.add("d-none");
changeFramee3.classList.add("d-none");
}<div >
<div >
<div >
<!--Basic Details-->
<div >
<div >
<div >
<div id="changeframee1">
<img src="./images/framee.jpeg"
alt="">
</div>
<div id="changeframee2" >
<img src="./images/framee2.jpeg"
alt="">
</div>
<div id="changeframee3" >
<img src="./images/framee3.jpeg"
alt="">
</div>
<div id="changeframee4" >
<img src="./images/framee4.jpeg"
alt="">
</div>
<figure id="changeitem1"><a href="#" data-toggle="modal"
data-target="#exampleModal"
title="FRP Doors"><img src="images/00.png" alt=""></a>
</figure>
<figure id="changeitem2"><a href="#"
data-toggle="modal" data-target="#exampleModal2"
title="FRP Doors"><img src="images/9.png"
alt=""></a>
</figure>
<figure id="changeitem3"><a href="#"
data-toggle="modal" data-target="#exampleModal3"
title="FRP Doors"><img src="images/3.png"
alt=""></a>
</figure>
<figure id="changeitem4"><a href="#"
data-toggle="modal" data-target="#exampleModal4"
title="FRP Doors"><img src="images/10.png"
alt=""></a>
</figure>
<div >
<button onclick="firstChange()"><img src="images/00.png"
alt=""></button>
<button onclick="secondChange()"><img src="images/9.png"
alt=""></button>
<button onclick="thirdChange()"><img src="images/3.png" alt=""></button>
<button onclick="fourthChange()"><img src="images/10.png"
alt=""></button>
</div>
</div>
<div >
<div >
<h4>FRP Doors</h4>
<div >
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
<div >$29.00</div>
</div>
<div >Not every fiberglass door is equal. Surya’s fiberglass
doors are reliable. Manufactured as part of the industry's only full
door system, they're built and tested to perform better than any other
exterior door and provide style, lasting beauty and durability.</div>
<div >
<h4>Choose frame</h4>
<button onclick="f1Change()"><img src="images/framee.jpeg"
alt=""></button>
<button onclick="f2Change()"><img src="images/framee2.jpeg"
alt=""></button>
<button onclick="f3Change()"><img src="images/framee3.jpeg"
alt=""></button>
<button onclick="f4Change()"><img src="images/framee4.jpeg"
alt=""></button>
</div>
<div >Check Delivery Option at Your Location:</div>
<!-- Pincode Form -->
<div >
<form method="post" action="contact.html">
<div >
<input type="text" name="text" value="" placeholder="Pincode"
required>
<button type="submit">Check</button>
</div>
</form>
</div>
<div >Expected Delivery in 4-10 Days</div>
<div >
<div ><input type="text"
value="2" name="quantity"></div>
<button type="button" >Add To
Cart</button>
</div>
</div>
</div>
</div>
<!--Basic Details-->
</div>
</div>
</div>Please check the snippet and tell me the best solution to avoid this worst coding.
I have used separate functions for each buttons. I hope there's a way in for, forEach or map loops.
Thank you
CodePudding user response：
function change(useChangeItems, removeIndex) {
items = useChangeItems ? changeItems : changeFramees;
items.forEach((el, index) => {
console.log(el);
if (removeIndex - 1 === index) {
el.classList.remove("d-none");
} else {
el.classList.add("d-none");
}
});
}
const changeItems = [];
const changeFramees = [];
for (let index = 1; index <= 4; index ) {
let changeItem = document.getElementById(`changeitem${index}`);
changeItems.push(changeItem);
}
for (let index = 1; index <= 4; index ) {
let changeFramee = document.getElementById(`changeframee${index}`);
changeFramees.push(changeFramee);
} <div >
<div >
<div >
<!--Basic Details-->
<div >
<div >
<div >
<div id="changeframee1">
<img src="./images/framee.jpeg" alt="">
</div>
<div id="changeframee2" >
<img src="./images/framee2.jpeg" alt="">
</div>
<div id="changeframee3" >
<img src="./images/framee3.jpeg" alt="">
</div>
<div id="changeframee4" >
<img src="./images/framee4.jpeg" alt="">
</div>
<figure id="changeitem1"><a href="#" data-toggle="modal"
data-target="#exampleModal" title="FRP Doors"><img
src="images/00.png" alt=""></a>
</figure>
<figure id="changeitem2"><a href="#" data-toggle="modal"
data-target="#exampleModal2" title="FRP Doors"><img
src="images/9.png" alt=""></a>
</figure>
<figure id="changeitem3"><a href="#" data-toggle="modal"
data-target="#exampleModal3" title="FRP Doors"><img
src="images/3.png" alt=""></a>
</figure>
<figure id="changeitem4"><a href="#" data-toggle="modal"
data-target="#exampleModal4" title="FRP Doors"><img
src="images/10.png" alt=""></a>
</figure>
<div >
<button onclick="change(true, 1);"><img src="images/00.png" alt=""></button>
<button onclick="change(true, 2);"><img src="images/9.png" alt=""></button>
<button onclick="change(true, 3);"><img src="images/3.png" alt=""></button>
<button onclick="change(true, 4);"><img src="images/10.png" alt=""></button>
</div>
</div>
<div >
<div >
<h4>FRP Doors</h4>
<div >
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
<div >$29.00</div>
</div>
<div >Not every fiberglass door is equal. Surya’s fiberglass
doors are reliable. Manufactured as part of the industry's only full
door system, they're built and tested to perform better than any other
exterior door and provide style, lasting beauty and durability.</div>
<div >
<h4>Choose frame</h4>
<button onclick="change(false, 1);"><img src="images/framee.jpeg" alt=""></button>
<button onclick="change(false, 2);"><img src="images/framee2.jpeg" alt=""></button>
<button onclick="change(false, 3);"><img src="images/framee3.jpeg" alt=""></button>
<button onclick="change(false, 4);"><img src="images/framee4.jpeg" alt=""></button>
</div>
<div >Check Delivery Option at Your Location:</div>
<!-- Pincode Form -->
<div >
<form method="post" action="contact.html">
<div >
<input type="text" name="text" value="" placeholder="Pincode" required>
<button type="submit">Check</button>
</div>
</form>
</div>
<div >Expected Delivery in 4-10 Days</div>
<div >
<div ><input type="text" value="2"
name="quantity"></div>
<button type="button" >Add To
Cart</button>
</div>
</div>
</div>
</div>
<!--Basic Details-->
</div>
</div>
</div>CodePudding user response：
Thank you for your time.
Please check this URL: https://www.techiesys.in/websites/surya/shop-single.html
Also check this image, I want codes like dynamic. If a user submits a new DOOR or FRAME it must be easy like giving an ID or like that. https://i.stack.imgur.com/XQoDx.png
const changeItem1 = document.getElementById("changeitem1");
const changeItem2 = document.getElementById("changeitem2");
const changeItem3 = document.getElementById("changeitem3");
const changeItem4 = document.getElementById("changeitem4");
const changeItems = [changeItem1, changeItem2, changeItem3, changeItem4];
const changeFramee1 = document.getElementById("changeframee1");
const changeFramee2 = document.getElementById("changeframee2");
const changeFramee3 = document.getElementById("changeframee3");
const changeFramee4 = document.getElementById("changeframee4");
const changeFramees = [
changeFramee1,
changeFramee2,
changeFramee3,
changeFramee4,
];If I want to add 5th one, then I need to create changeItem5 and changeFramee5 and also update those in the HTML on buttons, onclick="change(true, 5);
Please tell me is there any solutions for this?
I don't know but is there any possible way Event Delegation ?