I was working on a project where I need to toggle on/off the class name “off” of two elements but for some reason I can’t manage to do it via JavaScript, and I know that css is not the problem because if I do it manually it works, so I can’t seems to find the problem in my code…
Here’s the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script defer src="javascript.js"></script>
</head>
<body>
<div id="side-b">
<div class="menu">
<div class="menu-division">
<p>First List</p>
<div id="local-resources">
<ul class="grid-list">
<li class="no-active-resources">
<div class="coupling-div">
<p class="section-title">No hay ningun pack de recursos activo</p>
<p class="resources-desc">¿Quieres que tu mundo se vea diferente? Intenta activar un pack de recursos en "Disponibles".</p>
</div>
</li>
</ul>
</div>
</div>
<div class="menu-division">
<p>Second List</p>
<div id="inactive-local-resources">
<ul class="grid-list">
<li class="no-inactive-resources off">
<div class="coupling-div">
<p class="section-title">Ya activaste todos los packs</p>
<p class="resources-desc">Ya se activaron todos tus packs. ¡Obten más packs en el mercado o en línea!</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Here’s the CSS code
*{
margin: 0;
padding: 0;
font-size: 15px;
font-family: cursiva;
}
#side-b{
display: flex;
position: fixed;
top: 64px;
left: 476px;
right: 53px;
width: 857px;
height: 89.63%;
overflow-y: auto;
overflow-x: hidden;
}
.menu{
color: white;
display: block;
width:837px;
height: fit-content;
background: #48494A;
border: 2px solid #1E1E1F;
z-index: 1;
}
.menu-division{
padding: 14px 24px 14px 24px;
border-bottom: 2px solid #333334;
border-left: none;
border-right: none;
border-top: 2px solid #5A5B5C;
}
.coupling-div{
display: block;
text-align: center;
}
.no-active-resources>.coupling-div>.section-title, .no-inactive-resources>.coupling-div>.section-title{
margin-bottom: 8px;
margin-left: 0px;
}
.resources-desc{
display: block;
color: #D0D1D4;
font-size: 11.5px;
margin-left: 0px;
}
#local-resources{
display: grid;
grid-template-columns: 600px;
grid-template-rows: auto;
grid-template-areas:
"grid-list grid-list";
margin-bottom: 7px;
}
.grid-list{
grid-area: grid-list;
display: block;
height: auto;
border: 2px solid #1E1E1F;
border-top: none;
list-style: none;
}
.grid-list .list-element{
height: 64px;
overflow-y: hidden;
}
.grid-list .list-element>.inline-list-element{
display: flex;
align-items: center;
}
.grid-list .list-element>.inline-list-element>.element-grab, .grid-list .list-element>.inline-list-element>.element-config, .grid-list .list-element>.inline-list-element>.activate-element, .grid-list .list-element>.inline-list-element>.delete-element{
cursor: pointer;
display: flex;
align-items: center;
padding: 7px 8px 7px 8px;
height: 48px;
border-top: 2px solid #1E1E1F;
background-color: #48494A;
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px #333334;
}
.grid-list .list-element>.inline-list-element>.element-grab:hover, .grid-list .list-element>.inline-list-element>.element-config:hover, .grid-list .list-element>.inline-list-element>.activate-element:hover, .grid-list .list-element>.inline-list-element>.delete-element:hover, .grid-list .list-element>.list-option:hover, .grid-list .list-element>.inline-list-element>.list-option:hover{
background-color: #58585A;
}
.grid-list .list-element>.inline-list-element>.activate-element>p, .grid-list .list-element>.inline-list-element>.delete-element>p{
user-select: none;
margin-top: 3px;
font-size: 8px;
}
.grid-list .list-element>.inline-list-element>.element-config, .grid-list .list-element>.inline-list-element>.activate-element, .grid-list .list-element>.inline-list-element>.delete-element{
flex-direction: column;
padding: 7px 14px 7px 14px;
}
.grid-list .list-element>.inline-list-element>.element-config>img{
user-select: none;
margin-top: 10px;
}
.grid-list .list-element>.inline-list-element>.activate-element>img, .grid-list .list-element>.inline-list-element>.delete-element>img{
user-select: none;
margin-top: 5px;
}
.grid-list .list-element>.inline-list-element>.element-config>p{
user-select: none;
margin-top: 3px;
font-size: 10px;
}
.grid-list .list-element>.inline-list-element>.element-grab>p{
user-select: none;
margin-left: 5px;
font-size: 13px;
}
.grid-list .list-element>.inline-list-element>.list-option, .grid-list .list-element>.list-option{
display: flex;
align-items: center;
padding: 7px 8px 7px 8px;
height: 48px;
border-top: 2px solid #1E1E1F;
background-color: #48494A;
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px #333334;
}
.grid-list .list-element>.inline-list-element>.list-option>img{
user-select: none;
height: 48px;
width: 48px;
}
.grid-list .list-element>.inline-list-element>.list-option>p{
user-select: none;
margin-left: 8px;
width: 660px;
}
.grid-list .list-element>.inline-list-element>.list-option.active>p{
user-select: none;
width: 573px;
}
.grid-list .list-element>.inline-list-element>.list-option.no-config>p{
user-select: none;
width: 628px;
}
.grid-list .list-element>.list-option>p{
user-select: none;
margin-left: 8px;
width: 689px;
}
.grid-list .list-element>.list-option>span, .grid-list .list-element>.inline-list-element>.list-option>span, .grid-list .list-opener>span{
display: flex;
transform: rotate(100grad);
height: 48px;
width: 48px;
}
.grid-list .list-element>.list-option>span>p, .grid-list .list-element>.inline-list-element>.list-option>span>p, .grid-list .list-opener>span>p{
user-select: none;
cursor: pointer;
text-align: center;
line-height: 48px;
width: 48px;
}
.grid-list .element-description{
height: auto;
padding: 16px 12px 16px 12px;
border-top: 2px solid #1E1E1F;
background-color: #313233;
}
.grid-list .element-description>p{
user-select: none;
font-size: 13px;
}
.grid-list .no-active-resources, .grid-list .no-inactive-resources{
display: flex;
align-items: center;
border-top: 2px solid #1E1E1F;
height: 72px;
justify-content: center;
background-color: #313233;
}
.no-active-resources.off, .no-inactive-resources.off{
display: none;
}
And here’s the JavaScript code
let grid_lists = document.querySelectorAll('.grid-list');
let list_positions = document.querySelectorAll('.list-position');
let noActiveResourcesAlert = document.querySelector('.no-active-resources')
let noInactiveResourcesAlert = document.querySelector('.no-inactive-resources')
let noActResAlSelector = 1;
let noInactResAlSelector = 0;
let InactiveLocalResources = [];
let ActiveLocalResources = [];
let resourcePacks = [
{
img: '../img/minecraft-resource-pack-icon.png',
name: 'Pack de textura de Minecraft',
description: '¡Los graficos prdeterminados de Minecraft, actualizados con nuevas texturas modernas!',
config: false,
active: true
},
{
img: '../img/3d-items-icon.png',
name: '- 3D Items v6 | Subpacks!! -',
description: 'Laterns,Torchs,Campfires and More items 3D | By Hirx's',
config: true,
active: true
},
{
img: '../img/faithful-icon.png',
name: 'Faithful 32x - July 2022 Pre-release',
description: 'The go-to 32x texture pack for Minecraft. Now for Bedrock Edition',
config: false,
active: false
},
{
img: '../img/improv-default-icon.png',
name: 'Improved Default Textures v9.1 1.19',
description: 'Bedrock 1.19 v9.1 - Simple textures tweaks to improve some of Minecraft's rough or bland textures! B/LG and NEW dark UI settings available via subpacks. Made by IonicXHaze!',
config: true,
active: false
},
{
img: '../img/js-legacy-icon.png',
name: 'Jonh Smith Legacy Bedrock 1.19.50',
description: '32x32 Textures by JimStoneCraft',
config: false,
active: false
},
{
img: '../img/paper-cut-out-icon.png',
name: 'Paper Cut-Out 1.19 -0.7 Texture bedrock',
description: 'java by superalgae MCPE by @chengzzi89',
config: false,
active: false
},
{
img: '../img/pollacius-icon.png',
name: 'Pollacius v1.9.0',
description: 'Vibrant and boxy. by CheezLordy',
config: false,
active: false
},
]
let reverseResourcePacks = [...resourcePacks].reverse();
LoadResourcePacks();
let arrows = document.querySelectorAll('.arrow');
let activateElementBtn = document.querySelectorAll('.activate-element');
let deleteElementBtn = document.querySelectorAll('.delete-element');
document.addEventListener('click', e=>{
for(let i=0;i<arrows.length;i++){
if(e.target==arrows[i]){
if(arrows[i].dataset.open==0){
let listElement;
if(arrows[i].dataset.section==0){
listElement = arrows[i].parentElement.parentElement.parentElement.parentElement;
}else if(arrows[i].dataset.section==1){
listElement = arrows[i].parentElement.parentElement.parentElement;
}
let desc = listElement.lastElementChild;
let descHeight = desc.offsetHeight;
descHeight += 64;
listElement.style.height = `${descHeight}px`
arrows[i].dataset.open = 1;
arrows[i].textContent = '<';
}else if(arrows[i].dataset.open==1){
let listElement;
if(arrows[i].dataset.section==0){
listElement = arrows[i].parentElement.parentElement.parentElement.parentElement;
}else if(arrows[i].dataset.section==1){
listElement = arrows[i].parentElement.parentElement.parentElement;
}
let desc = listElement.lastElementChild;
let listElementHeight = listElement.offsetHeight;
let descHeight = desc.offsetHeight;
listElementHeight -= descHeight;
listElement.style.height = `${listElementHeight}px`
arrows[i].dataset.open = 0;
arrows[i].textContent = '>';
}
}
}
})
document.addEventListener('click', e=>{
for(let i=0;i<activateElementBtn.length;i++){
if(e.target==activateElementBtn[i] || e.target==activateElementBtn[i].firstElementChild || e.target==activateElementBtn[i].lastElementChild){
let listElement = activateElementBtn[i].parentElement.parentElement;
ActivateElement(listElement.dataset.position);
RemoveListElements();
RearrangeLists();
}
}
})
document.addEventListener('click', e=>{
for(let i=0;i<deleteElementBtn.length;i++){
if(e.target==deleteElementBtn[i] || e.target==deleteElementBtn[i].firstElementChild || e.target==deleteElementBtn[i].lastElementChild){
let listElement = deleteElementBtn[i].parentElement.parentElement;
DeactivateElement(listElement.dataset.position);
RemoveListElements();
RearrangeLists();
}
}
})
function ActivateElement(position){
for(let i=0;i<reverseResourcePacks.length;i++){
if(InactiveLocalResources[i]==reverseResourcePacks[position]){
InactiveLocalResources.splice(i,1);
reverseResourcePacks[position].active=true;
break;
}
}
}
function DeactivateElement(position){
for(let i=0;i<reverseResourcePacks.length;i++){
if(ActiveLocalResources[i]==reverseResourcePacks[position]){
ActiveLocalResources.splice(i,1);
reverseResourcePacks[position].active=false;
break;
}
}
}
function RemoveListElements(){
while(grid_lists[0].children.length>1){
grid_lists[0].removeChild(grid_lists[0].lastChild)
}
while(grid_lists[1].children.length>1){
grid_lists[1].removeChild(grid_lists[1].lastChild)
}
}
function RearrangeLists(){
let active_count = 0;
ActiveLocalResources = [];
InactiveLocalResources = [];
for(let i=0;i<reverseResourcePacks.length;i++){
if(reverseResourcePacks[i].active){
active_count++
ActiveLocalResources.unshift(reverseResourcePacks[i]);
createActiveListElement(reverseResourcePacks[i], i, active_count)
}else{
InactiveLocalResources.unshift(reverseResourcePacks[i]);
createLocalListElement(reverseResourcePacks[i], i)
}
}
turnOnAndOffAlerts();
arrows = document.querySelectorAll('.arrow');
activateElementBtn = document.querySelectorAll('.activate-element');
deleteElementBtn = document.querySelectorAll('.delete-element');
}
function LoadResourcePacks(){
let active_count = 0;
for(let i=0;i<reverseResourcePacks.length;i++){
if(reverseResourcePacks[i].active){
active_count++;
ActiveLocalResources.unshift(reverseResourcePacks[i]);
createActiveListElement(reverseResourcePacks[i], i, active_count);
}else{
InactiveLocalResources.unshift(reverseResourcePacks[i]);
createLocalListElement(reverseResourcePacks[i], i);
}
}
turnOnAndOffAlerts();
}
function turnOnAndOffAlerts(){
if(InactiveLocalResources.length==0 && noInactResAlSelector==0){
noInactiveResourcesAlert.classList.toggle('off');
noInactResAlSelector=1;
}else if(InactiveLocalResources.length>0 && noInactResAlSelector==1){
noInactiveResourcesAlert.classList.toggle('off');
noInactResAlSelector=0;
}
if(ActiveLocalResources.length==0 && noActResAlSelector==0){
noActiveResourcesAlert.classList.toggle('off');
noActResAlSelector=1;
}else if(ActiveLocalResources.length>0 && noActResAlSelector==1){
noActiveResourcesAlert.classList.toggle('off');
noActResAlSelector=0;
}
}
function createLocalListElement(object, count){
grid_lists[1].innerHTML += `
<li class="list-element" data-position="${count}">
<div class="inline-list-element">
<div class="list-option">
<p>${object.name}</p>
<span>
<p class="arrow" data-open="0" data-section="0">></p>
</span>
</div>
<div class="activate-element">
<p>Activar</p>
</div>
</div>
<div class="element-description">
<p>${object.description}</p>
</div>
</li>`;
}
function createActiveListElement(object, count, listPosition){
if(object.config){
grid_lists[0].innerHTML += `
<li class="list-element" data-position="${count}">
<div class="inline-list-element">
<div class="element-grab">
<p class="list-position">${listPosition}</p>
</div>
<div class="list-option active">
<p>${object.name}</p>
<span><p class="arrow" data-open="0" data-section="0">></p></span>
</div>
<div class="element-config">
<p>Config</p>
</div>
<div class="delete-element">
<p>Eliminar</p>
</div>
</div>
<div class="element-description">
<p>${object.description}</p>
</div>
</li>`
}else{
grid_lists[0].innerHTML += `
<li class="list-element" data-position="${count}">
<div class="inline-list-element">
<div class="element-grab">
<p class="list-position">${listPosition}</p>
</div>
<div class="list-option no-config">
<p>${object.name}</p>
<span><p class="arrow" data-open="0" data-section="0">></p></span>
</div>
<div class="delete-element">
<p>Eliminar</p>
</div>
</div>
<div class="element-description">
<p>${object.description}</p>
</div>
</li>`
}
}
Also sorry if my english is bad, I’m still learning
What I wanted to happen is that when any of the two lists had more than one element, the elements with classes “no-active-resources” and “no-inactive-resources” would disappear, but when they didn’t have more than one they would reappear.