Develop Reference

Trouble with UI for avatar creator. Populating list requires double click instead of 1

Problem Description
I am fairly new to html, css and javascript, more so javascript than the former two and I'm looking for advice on some code for my personal project. You can see an example in the code snippet below (there are no images).
I am trying to create the UI for a "character creator" or "avatar creator". Something like: https://avatarmaker.com/
I have basically achieved this but i've run into a few problems. The way the program populates the orange area is by changing the css display from "none" to "display". The problem with this is it requires a double click to change populated area. Also the code is very messy.
I have attempted to streamline the code with a for loop in the "Attempt at Changing Javascreipt". But it doesn't work at all.
So if anyone has any advice to streamline any of this code it would be very much appreciated.
/*
const toggleChoices = document.querySelectorAll("#headchoices, #torsochoices, #legschoices, #backchoices, #handchoices, #waistchoices, #feetchoices, #mainhandchoices, #offhandchoices");
function getHead() {
let arraylength = toggleChoices.length;
for (var i = 0; i < arraylength; i++) {
if toggleChoices[i].style.display === "block" {
toggleChoices[i].style.display = "none";
}
}
let toggleHead = document.getElementById("headchoices");
if (toggleHead.style.display === "none") {
toggleHead.style.display = "block";
}
}
*/
//let toggleDisplayStatus === FALSE;
function getHead() {
let toggleHead = document.getElementById("headchoices");
if (toggleHead.style.display === "none") {
toggleHead.style.display = "block";
}
var x = document.getElementById("torsochoices");
x.style.display = "none";
var x = document.getElementById("legschoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
function getTorso() {
let toggleTorso = document.getElementById("torsochoices");
if (toggleTorso.style.display === "none") {
toggleTorso.style.display = "block";
}
var x = document.getElementById("headchoices");
x.style.display = "none";
var x = document.getElementById("legschoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
function getLegs() {
let toggleLegs = document.getElementById("legschoices");
if (toggleLegs.style.display === "none") {
toggleLegs.style.display = "block";
}
var x = document.getElementById("headchoices");
x.style.display = "none";
var x = document.getElementById("torsochoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
STYLE SHEET */ #font-face {
src: url(../../fonts/KGTangledUpInYou.ttf);
font-family: tang1;
}
#font-face {
src: url(../../fonts/KGTangledUpInYou2.ttf);
font-family: tang2;
}
* {
margin: 0;
padding: 0;
}
hmtl {
height: 100%;
}
/* ///////////////////////////////// SCROLLBAR STYLING //////////////////////////////// */
::-webkit-scrollbar {
width: 0.8em;
height: 10px;
}
::-webkit-scrollbar-track {
background: #a76e59;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #fad4b3;
}
body {
min-height: 100%;
background-color: #2d2524;
}
/*----------------------------------------------------------------------------------NAVIGATION BAR--------------------------------------------------------------------
*----------------------------------------------------------------------------------NAVIGATION BAR--------------------------------------------------------------------
/* BANNER COLOR AND SIZE */
.navbar {
min-height: 5vh;
width: 100%;
background-color: #2d2524;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo_short {
padding: 0.5% 3%;
}
/* spacing and alignment of nav links */
.nav-links {
padding: 0.5% 2%;
flex: 1;
text-align: right;
}
/* getting rid of bullit points (making horizontal row) and adding padding within the header boarder */
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 16px;
/* distance between eachother */
position: relative;
}
.nav-links ul li a {
color: #fad4b3;
text-decoration: none;
font-size: 1.5625rem;
/*25px; /* 36 pt */
font-family: tang2;
position: relative;
text-shadow: -2px 3px 2px #1f1d1c;
/* text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; */
}
/*HOVER EFFECT */
.nav-links ul li a:hover {
color: white;
}
/*/////////////////////////////////////////////////////////////////////////////// SIDEBAR///////////////////////////////////////////////////////////////////////////////*/
.btn {
position: fixed;
top: 80px;
left: 30px;
height: 45px;
width: 45px;
text-align: center;
background: #a65c41;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
z-index: 10;
}
.btn.click {
left: 260px;
}
.btn span {
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before {
content: '\f00d';
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #a65c41;
transition: left 0.4s ease;
z-index: 10;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
font-size: 40px;
color: #fad4b3;
text-shadow: -2px 3px 2px #1f1d1c;
font-family: tang2;
line-height: 65px;
text-align: center;
background: #a65c41;
letter-spacing: 1px;
cursor: pointer;
}
.sidebar .text:hover {
color: #F8F5FA;
}
.sidebar ul {
background: #a65c41;
height: 100%;
width: 100%;
list-style: none;
}
.sidebar ul li {
line-height: 80px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar ul li a {
position: relative;
color: #F8F5FA;
text-decoration: none;
text-align: left;
font-family: tang2;
font-size: 22px;
padding-left: 40px;
font-weight: 100px;
display: block;
width: 100%;
}
.sidebar ul li a:hover {
background: #a76e59;
}
/* SOCIAL MEDIA ICONS */
/* SOCIAL MEDIA ICONS */
.iconsS {
display: inline-block;
text-align: center;
justify-content: center;
padding-top: 350px;
padding-left: 25px;
}
.iconsS ul a {
text-decoration: none;
/* LINE GONE */
}
.iconsS ul a {
font-size: 16px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #fad4b3;
height: 50px;
/* background box height */
width: 50px;
/* background box width */
background: #a76e59;
margin: 5px;
/* sitance between eachother */
border-radius: 10px;
transition: all 0.3s ease;
}
.sidebar .iconsS a:hover {
background: #2d2524;
}
/*///////////////////////////////////////////////
/////////////////////////////////////////////*/
#media(max-width: 950px) {
.logo {
display: none;
}
.logo_short {
padding: 1% 4%;
display: flex;
}
}
/*-----------------------------------------------------------------------Panel 1------------------------------------------------------------------*/
/*-----------------------------------------------------------------------Panel 1------------------------------------------------------------------*/
.etypeselector {
position: absolute;
right: 0;
margin-top: 60px;
width: 100px;
height: 80vh;
background: #a65c41;
border-radius: 5px;
z-index: 10;
overflow: hidden;
overflow-y: scroll;
}
.etypeselector ul {
display: block;
}
.etypeselector ul button {
display: relative;
height: 100px;
width: 100%;
background: #a65c41;
}
.etypeselector ul button img {
display: relative;
justify-content: center;
height: 70px;
width: 70px;
padding-top: .6em;
padding-bottom: .6em;
cursor: pointer;
}
/* ////////////////////////////////////////////////////////////// CHOISES MENU /////////////////////////////////////////////////// */
.echoices {
position: absolute;
display: block;
right: 0;
margin-right: 200px;
margin-top: 10vh;
min-width: 500px;
width: 30vw;
height: 70vh;
background: #a65c41;
border-radius: 20px;
overflow: hidden;
}
.colourbar {
position: relative;
display: block;
width: 100%;
height: 15vh;
background: #a76e59;
/* #a65c41; */
border-radius: 20px;
margin: 12px 12px 12px;
}
.colourbar h1 {
color: #fad4b3;
/* color of links (white) */
text-align: center;
justify-content: center;
text-decoration: none;
font-size: 2rem;
/*25px; /* 36 pt */
font-family: tang2;
position: relative;
text-shadow: -2px 3px 2px #1f1d1c;
/* text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; */
}
.echoices button {
display: relative;
height: 160px;
width: 160px;
background: #a76e59;
cursor: pointer;
}
.echoices button img {
display: relative;
margin: auto;
width: 80%;
max-height: 80%;
}
#headchoices {
position: absolute;
justify-content: center;
max-height: 70%;
max-width: 100%;
margin-left: 45px;
margin-right: 10px;
overflow-y: scroll;
}
#torsochoices,
#legschoices {
position: absolute;
display: none;
justify-content: center;
max-height: 70%;
max-width: 100%;
margin-left: 45px;
margin-right: 10px;
overflow-y: scroll;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styleE.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- edge of website should follow edge of device -->
<script src="https://kit.fontawesome.com/976d327f90.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title>Equipment Selector</title>
</head>
<body>
<!-- /////////////////////////////////////////////////////////////////////// NAVIGATION BAR //////////////////////////////////////////////////////////////////////////////-->
<section class="navbar">
<!-- NAVIGATION Links -->
<nav>
<div class="logo_short">
<img src="../../images/DoMH_short.png" width="135px" height="35px">
<!-- LOGO LINK -->
</div>
<!-- NAVIGATION TOP BAR LINKS -->
<div class="nav-links">
<ul>
<li><a href=""><i class="fas fa-arrow-circle-left"></i><a/></li> <!-- BACK A PAGE -->
<li><a href="pages/login/login.html"><i class="fas fa-sign-out-alt fa-fw"></i><a/></li> <!-- LOGOUT -->
</ul>
</div>
</nav>
</section>
<!-- ///////////////////////////////////////SIDEBAR///////////////////////////////-->
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<section class="sidebar">
<div class="text">
SUBSCRIBE
</div>
<ul>
<li><i class="fas fa-home fa-fw"></i> Home</li>
<li><i class="fas fa-users fa-fw"></i> About Us</li>
<li><i class="fas fa-comment-dots fa-fw"></i> Suggestions</li>
<li><i class="fas fa-info-circle fa-fw"></i> Changelog</li>
<div class="iconsS">
<ul>
<i class="fab fa-discord fa-2x"></i>
<i class="fab fa-instagram-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
</ul>
</div>
</ul>
</section>
<!-- /////////////////////////////////////////////////////////////////////// EQUIPMENT SELECTOR //////////////////////////////////////////////////////////////////////////////-->
<section class="wrapper">
<div class="characterwrapper">
</div>
<section class="etypeselector">
<!-- Equiptment TYPE Selector i.e. "Head Piece", "body" etc. -->
<ul>
<button onclick="getHead()" type="button" name="head"><img src="equipment-icons\Head.png" alt=""></button>
<button onclick="getTorso()" type="button" name="torso"><img src="equipment-icons\Torso.png" alt=""></button>
<button onclick="getLegs()" type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button onclick="getBack()" type="button" name="back"><img src="equipment-icons\Cloak.png" alt=""></button>
<button onclick="getHands()" type="button" name="hands"><img src="equipment-icons\Gloves.png" alt=""></button>
<button onclick="getWaist()" type="button" name="waist"><img src="equipment-icons\Waist.png" alt=""></button>
<button onclick="getFeet()" type="button" name="feet"><img src="equipment-icons\Boots.png" alt=""></button>
<button onclick="getMainhand()" type="button" name="mainhand"><img src="equipment-icons\MainHand.png" alt=""></button>
<button onclick="getOffhand()" type="button" name="offhand"><img src="equipment-icons\Offhand.png" alt=""></button>
<button onclick="getAccesories()" type="button" name="accesories"><img src="" alt=""></button>
<button onclick="getAura()" type="button" name="aura"><img src="" alt=""></button>
</ul>
</section>
<section class="echoices">
<!-- Equiptment Selector - type assets-->
<div class="colourbar">
<h1>COLOUR BAR GOES HERE</h1>
</div>
<div id="headchoices">
<button type="button" name="head1"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head2"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head3"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head4"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head5"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head6"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head7"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head8"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head9"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head10"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head11"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head12"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head13"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head14"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head15"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head16"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head17"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head18"><img src="equipment-icons\Head.png" alt=""></button>
</div>
<div id="torsochoices">
<button type="button" name="head"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="torso"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="back"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="hands"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="waist"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="feet"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="mainhand"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="offhand"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="head"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="torso"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="back"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="hands"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="waist"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="feet"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="mainhand"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="offhand"><img src="equipment-icons\Torso.png" alt=""></button>
</div>
<div id="legschoices">
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
</div>
</section>
</section>
<script>
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function() {
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function() {
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function() {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
<script src="application.js"></script>
</body>
</html>
html code
<section class="echoices">
<div class="colourbar">
<h1>COLOUR BAR GOES HERE</h1>
</div>
<div id="headchoices">
<button type="button" name="head1"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head2"><img src="equipment-icons\Head.png" alt=""></button>
<button type="button" name="head3"><img src="equipment-icons\Head.png" alt=""></button>
</div>
<div id="torsochoices">
<button type="button" name="head"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="torso"><img src="equipment-icons\Torso.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Torso.png" alt=""></button>
</div>
<div id="legschoices">
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
<button type="button" name="legs"><img src="equipment-icons\Legs.png" alt=""></button>
</div>
CSS code
.echoices {
position: absolute;
display: block;
right: 0;
margin-right: 200px;
margin-top: 10vh;
min-width: 500px;
width: 30vw;
height: 70vh;
background: #a65c41;
border-radius: 20px;
overflow: hidden;
}
.echoices button {
display: relative;
height: 160px;
width: 160px;
background: #a76e59;
cursor:pointer;
}
.echoices button img {
display: relative;
margin:auto;
width: 80%;
max-height: 80%;
}
#headchoices {
position: absolute;
justify-content: center;
max-height:70%;
max-width: 100%;
margin-left: 45px;
margin-right: 10px;
overflow-y: scroll;
}
#torsochoices, #legschoices, {
position: absolute;
display: none;
justify-content: center;
max-height:70%;
max-width: 100%;
margin-left: 45px;
margin-right: 10px;
overflow-y: scroll;
}
Original Javascript Code
function getHead() {
let toggleHead = document.getElementById("headchoices");
if (toggleHead.style.display === "none") {
toggleHead.style.display = "block";
}
var x = document.getElementById("torsochoices");
x.style.display = "none";
var x = document.getElementById("legschoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
function getTorso() {
let toggleTorso = document.getElementById("torsochoices");
if (toggleTorso.style.display === "none") {
toggleTorso.style.display = "block";
}
var x = document.getElementById("headchoices");
x.style.display = "none";
var x = document.getElementById("legschoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
function getLegs() {
let toggleLegs = document.getElementById("legschoices");
if (toggleLegs.style.display === "none") {
toggleLegs.style.display = "block";
}
var x = document.getElementById("headchoices");
x.style.display = "none";
var x = document.getElementById("torsochoices");
x.style.display = "none";
var x = document.getElementById("backchoices");
x.style.display = "none";
var x = document.getElementById("handchoices");
x.style.display = "none";
var x = document.getElementById("waistchoices");
x.style.display = "none";
var x = document.getElementById("feetchoices");
x.style.display = "none";
var x = document.getElementById("mainhandchoices");
x.style.display = "none";
var x = document.getElementById("offhandchoices");
x.style.display = "none";
}
Attempt At Changing Javascript
const toggleChoices = document.querySelectorAll("#headchoices, #torsochoices, #legschoices);
function getHead() {
let arraylength = toggleChoices.length;
for (var i = 0; i < arraylength; i++) {
if toggleChoices[i].style.display === "block" {
toggleChoices[i].style.display = "none";
}
}
let toggleHead = document.getElementById("headchoices");
if (toggleHead.style.display === "none") {
toggleHead.style.display = "block";
}
}

Slider goes out of first and last element

Im new to web development.
What i want to make is a slider for buttons.
How can i prevent it going out of first and last element? Right now i can slide it to the right on click, move it and when i click again it moves back to its initial position.
How can i make it draggable only between the first and last element and not go out of it.
Sorry if anything is unclear.
Any help is appreciated!
Here is my code below.
const track = document.querySelector('.track');
let initialPosition = null;
let moving = false;
let transform = 0;
let firstPosition = window.scrollX + document.querySelector('.track').getBoundingClientRect().left // X
const scrollStart = (e) => {
initialPosition = e.pageX;
moving = true;
const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
if(transformMatrix !== 'none'){
if((parseInt(transformMatrix.split(',')[4].trim())) >= firstPosition){
transform = firstPosition;
} else {
transform = parseInt(transformMatrix.split(',')[4].trim());
}
}
};
const scrollMove = (e) => {
if(moving) {
const currentPosition = e.pageX;
const diff = currentPosition - initialPosition;
if(diff){
track.style.transform = `translateX(${transform + diff}px)`;
}
}
};
const scrollEnd = (e) => {
moving = false;
if(transform >= firstPosition){
track.style.transform = `translateX(${firstPosition})`;
}
};
if(window.PointerEvent) {
window.addEventListener('pointerdown', scrollStart);
window.addEventListener('pointermove', scrollMove);
window.addEventListener('pointerup', scrollEnd);
} else {
window.addEventListener('mousedown', scrollStart);
window.addEventListener('mousemove', scrollMove);
window.addEventListener('mouseup', scrollEnd);
window.addEventListener('touchdown', scrollStart);
window.addEventListener('touchmove', scrollMove);
window.addEventListener('touchup', scrollEnd);
}
body {
margin: 0;
}
.carousel {
width: 100%;
height: 140px;
background: #203290;
position: relative;
overflow: hidden;
}
.carousel .track {
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
touch-action: none;
}
.carousel .track .card {
width: 300px;
height: 120px;
background: #081050;
border-radius: 15px;
margin-right: 10px;
}
.card-button {
width: 100%;
height: 100%;
border-radius: 15px;
}
.card-button-text {
font-size: 4vh;
}
<div class="container">
<div class="carousel">
<div class="track">
<div class="card">
<button class="card-button"><span class="card-button-text">Link1</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link2</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link3</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link4</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link5</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link6</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link7</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link8</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link9</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link10</span></button>
</div>
</div>
</div>
</div>

Select multiple DIVs with same name using JavaScript

I know how to select similarly named class name or ID if there are in the same direct parent, meaning if there are in the same box, proof https://codepen.io/akpobi/pen/poPddMr. But if there are more boxes and I'm trying to target all the buttons in their separate parents, it doesn't work. Help.
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
const boxInternal = document.querySelector(".box-internal").childNodes;
const popFunc = function(event) {
for (const boxInternals of boxInternal) {
if (event.target == boxInternals) {
box.classList.toggle("box-scale");
}
}
};
btn.addEventListener("click", popFunc, false)
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>

You can use .closest(".box") to get the closest enclosing box to the event target, then toggle the desired class on it:
for (const btn of document.querySelectorAll(".btn")) {
btn.addEventListener("click", evt => {
evt.target.closest(".box").classList.toggle("box-scale");
});
}
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
Alternatively, you can use event delegation in the parent element:
document.querySelector(".box-wrapper")
.addEventListener("click", ({target: el}) => {
el.closest(".btn")
?.closest(".box")
?.classList
.toggle("box-scale")
;
})
;
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
If this is part of a form, you might want to disable submit with type="button" attributes on your buttons.

How do I change image when a radio button is clicked in React

What is the simplest way to change the image of card when radio button or even button is clicked.
I wanted to display a list of cards (list of products) with every single card has 3 images with 3 radio buttons.
May this code explain more my purpose and I'm sure there is a better way than this:
<html>
<body>
<style>
.b1, .b2, .b3{
background-color: black;
width: 50px;
height: 30px;
}
.content {
border: 3px solid blue;
width: 300px;
height: 200px;
}
#y, #z, #b, #c{
display: none;
}
img {
width: 300px;
height: 200px;
}
button {
outline: none;
}
</style>
<div class="container" style="float: left; margin-right: 50px" >
<script>
const x = () => {
document.getElementById("x").style.display ='block';
document.getElementById("y").style.display ='none'
document.getElementById("z").style.display ='none'
}
const y = () => {
document.getElementById("y").style.display ='block'
document.getElementById("x").style.display ='none'
document.getElementById("z").style.display ='none'
}
const z = () => {
document.getElementById("z").style.display ='block'
document.getElementById("x").style.display ='none'
document.getElementById("y").style.display ='none'
}
</script>
<button class="b1" onClick="x()"></button>
<button class="b2" onClick="y()"></button>
<button class="b3" onClick="z()"></button>
<div class="content">
<div id="x"><img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_1280.jpg" /> </div>
<div id="y"><img src="https://as.ftcdn.net/r/v1/pics/ea2e0032c156b2d3b52fa9a05fe30dedcb0c47e3/landing/images_photos.jpg" /> </div>
<div id="z"><img src="http://indeksonline.net/wp-content/uploads/2018/08/photo-1500644813727-ac2ce0ae31f8.jpg" /> </div>
</div>
</div>
<div class="container" style="float: left; margin-right: 50px">
<script>
const a = () => {
document.getElementById("a").style.display ='block';
document.getElementById("b").style.display ='none'
document.getElementById("c").style.display ='none'
}
const b = () => {
document.getElementById("b").style.display ='block'
document.getElementById("a").style.display ='none'
document.getElementById("c").style.display ='none'
}
const c = () => {
document.getElementById("c").style.display ='block'
document.getElementById("a").style.display ='none'
document.getElementById("b").style.display ='none'
}
</script>
<button class="b1" onClick="a()"></button>
<button class="b2" onClick="b()"></button>
<button class="b3" onClick="c()"></button>
<div class="content">
<div id="a"><img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_1280.jpg" /> </div>
<div id="b"><img src="https://as.ftcdn.net/r/v1/pics/ea2e0032c156b2d3b52fa9a05fe30dedcb0c47e3/landing/images_photos.jpg" /> </div>
<div id="c"><img src="http://indeksonline.net/wp-content/uploads/2018/08/photo-1500644813727-ac2ce0ae31f8.jpg" /> </div>
</div>
</div>
</body>
</html>
I'm going to render dozen of products and I don't think this is a good way.
Thank you in advance

How to stop the <audio> file from playing when i hide the <div>?

I am trying to make a music player using HTML, CSS and Vanilla Js. I am facing these problems:
1.How to stop the song of first artist from playing when i click on the second artist?
Also, when I start off by clicking on a particular div (Mozart, GnR, etc.), I have to click twice before the player loads up.
I am new to JavaScript, so I am not able to grasp the concept of using play() and pause() functions for my audio file (the "Promise uncaught error"), so it would be great if you explain it to me without relating to this particular concept. Also, if you have some very good documents on the Promise , kindly post the link too!
Thank you. :)
function mozart() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('mozartSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function gnr() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('gnrSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function lz() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('ledzepplinSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function metallica() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('metallicaSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function scorpion() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('scorpionSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function acdc() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('acdcSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
function queen() {
var playArea = document.getElementById('playArea');
if (playArea.style.display == 'none') {
playArea.style.display = 'flex';
} else {
playArea.style.display = 'none';
}
var playSong = document.getElementsByClassName('queenSong')[0];
if (playSong.style.display == 'none') {
playSong.style.display = 'flex';
} else {
playSong.style.display = 'none';
}
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
background-color: white;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .maincontent {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.container .maincontent .header {
width: 100%;
height: 10%;
background-color: #8ED2C9;
}
.container .maincontent .mainSec {
width: 100%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container .maincontent .mainSec .keys {
width: 10%;
height: 100%;
background-color: #FF7A5A;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: column;
}
.container .maincontent .mainSec .keys .mozart,
.gnr,
.ledzepplin,
.metallica,
.scorpion,
.acdc,
.queen {
width: 100%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: transparent;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Roboto;
font-size: 18px;
cursor: pointer;
border-radius: 5%;
outline: none;
transition: 0.5s all ease;
}
button: hover {
color:
}
.container .maincontent .mainSec .contentSec {
width: 90%;
height: 100%;
background-color: #FFB85F;
display: flex;
justify-content: center;
align-items: center;
}
.container .maincontent .mainSec .contentSec #playArea {
width: 50%;
height: 60%;
border-radius: 5px;
background-color: #fcf4d9;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-family: Roboto;
color: white;
display: none;
}
.container .maincontent .mainSec .contentSec #playArea .mozartSong,
.gnrSong,
.ledzepplinSong,
.metallicaSong,
.scorpionSong,
.acdcSong,
.queenSong {
display: none;
position: fixed;
}
<!DOCTYPE html>
<html>
<head>
<title>Music Player</title>
<link rel="stylesheet" type="text/css" href="music.css">
</head>
<body>
<div class="container">
<div class="maincontent">
<div class="header"></div>
<!--Header div ends-->
<div class="mainSec">
<div class="keys">
<div class="mozart">
<div class="mozartBtn">
<button class="Mozart" onclick="mozart()">Mozart</button>
</div>
</div>
<!--Mozart div ends-->
<div class="gnr">
<div class="gnrBtn">
<button class="Gnr" onclick="gnr()">GnR</button>
</div>
</div>
<!--Gnr div ends-->
<div class="ledzepplin">
<div class="ledzepplingBtn">
<button class="LedZepplin" onclick="lz()">LedZepplin</button>
</div>
</div>
<!--Led Zepplin div ends-->
<div class="metallica">
<div class="metallicaBtn">
<button class="Metallica" onclick="metallica()">Metallica</button>
</div>
</div>
<!--Metallica div ends-->
<div class="scorpion">
<div class="scorpionBtn">
<button class="Scorpion" onclick="scorpion()">Scorpion</button>
</div>
</div>
<!--Scorpion div ends-->
<div class="acdc">
<div class="acdcBtn">
<button class="ACDC" onclick="acdc()">AcDc</button>
</div>
</div>
<!--ACDC div ends-->
<div class="queen">
<div class="queenBtn">
<button class="Queen" onclick="queen()">Queen</button>
</div>
</div>
<!--Queen div ends-->
</div>
<!--keys div ends-->
<div class="contentSec">
<div id="playArea">
<div class="mozartSong">
<audio controls>
<source src="music/mozart.wav" type="audio/wav" id="curSong">
</audio>
</div>
<div class="gnrSong">
<audio controls>
<source src="music/gnr.wav" type="audio/wav">
</audio>
</div>
<div class="ledzepplinSong">
<audio controls>
<source src="music/ledzepplin.wav" type="audio/wav">
</audio>
</div>
<div class="metallicaSong">
<audio controls>
<source src="music/metallica.wav" type="audio/wav">
</audio>
</div>
<div class="scorpionSong">
<audio controls>
<source src="music/scorpion.wav" type="audio/wav">
</audio>
</div>
<div class="acdcSong">
<audio controls>
<source src="music/acdc.wav" type="audio/wav">
</audio>
</div>
<div class="queenSong">
<audio controls>
<source src="music/queen.wav" type="audio/wav">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="music.js"></script>
</body>
</html>
`

As I suggested, you have too many functions with the same functionality.
I've made it a bit easier for you. This will replace the audio tag so the previous audio will stop. Just change path to your song directory
<script>
var playSong = function(songName) {
var audio = document.getElementById('playArea');
var source = document.getElementById('playSong');
source.src = 'path to your song directory' + songName + '.wav';
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
}
</script>
<div class="keys">
<div class="mozart">
<div class="mozartBtn">
<button class="Mozart" onclick="playSong('Mozart')">Mozart</button>
</div>
</div>
<!--Mozart div ends-->
<div class="gnr">
<div class="gnrBtn">
<button class="Gnr" onclick="playSong('GnR')">GnR</button>
</div>
</div>
<!--Gnr div ends-->
<div class="ledzepplin">
<div class="ledzepplingBtn">
<button class="LedZepplin" onclick="playSong('LedZepplin')">LedZepplin</button>
</div>
</div>
<!--Led Zepplin div ends-->
<div class="metallica">
<div class="metallicaBtn">
<button class="Metallica" onclick="playSong('Metallica')">Metallica</button>
</div>
</div>
<!--Metallica div ends-->
<div class="scorpion">
<div class="scorpionBtn">
<button class="Scorpion" onclick="playSong('Scorpion')">Scorpion</button>
</div>
</div>
<!--Scorpion div ends-->
<div class="acdc">
<div class="acdcBtn">
<button class="ACDC" onclick="playSong('AcDc')">AcDc</button>
</div>
</div>
<!--ACDC div ends-->
<div class="queen">
<div class="queenBtn">
<button class="Queen" onclick="playSong('Queen')">Queen</button>
</div>
</div>
<!--Queen div ends-->
</div>
<audio id="playArea" controls>
<source src="music/mozart.wav" type="audio/wav" id="playSong">
</audio>