function to make some divs disappear

Question

i have a 3divs inside of a container and when i click div number 1 i want the others to disappear but it works only when i click the "rock" div

The parent div is called "choices" in the JS file i am trying to loop over the child divs to keep the clicked one and hide the others

 choices.addEventListener("click", (e) => { let currentTag = e.target.tagName; let current; if (e.target.className !== "choices") { // to make sure the user click on the choices only switch ( currentTag // to get the div element even if the user clicked the svg or the path ) { case "DIV": current = e.target; console.log(current); break; case "svg": current = e.target.parentElement; console.log(current); break; case "path": current = e.target.parentElement.parentElement; console.log(current); break; default: break; } current.setAttribute("chosen", "true"); for (i = 0; i < choicesList.length; i++) { choicesList[i].hasAttribute("chosen") ? "" : choices.removeChild(choicesList[i]); } } });

 <div class="choices" vassel="true"> <!-- Scissors --> <div class="scissors"> <svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58"> <path class="scissors" fill="#3B4262" d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z" /> </svg> </div> <!-- rock --> <div class="rock"> <svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48"> <path class="rock" fill="#3B4262" d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z" /> </svg> </div> <!-- Paper --> <div class="paper"> <svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59"> <path class="paper" fill="#3B4262" d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z" /> </svg> </div> </div>

and here is the link for codepen : https://codepen.io/omarmahdy/pen/JjpEMaV

Answer 1

There is a problem with your child selector. My suggestion is to use querySelectorAll() and add a second class to all options. I created a working fork here: https://codepen.io/foorschtbar/pen/OJQWZJJ

 const choicesList = document.querySelectorAll(".choice");

 <!-- Scissors --> <div class="scissors choice"> [...] </div> <!-- Rock --> <div class="rock choice"> [...] </div> <!-- Paper --> <div class="paper choice"> [...] </div>

(i hope i understand your problem right and is now fixed)

Answer 2

IMHO you should apply a CSS-class with classList.add('class-name) to all the child div elements of choices :
document.querySelectorAll('.choices div').forEach(el => el.classList.add('class-name');

Then you remove this class for the clicked element after wards. That CSS-Class only needs to contain: display: none;

 var choices = document.querySelector('.choices'); choices.addEventListener('click', e => { var scissors = document.querySelector('.scissors'), rock = document.querySelector('.rock'), paper = document.querySelector('.paper'); document.querySelectorAll('.choices div').forEach(el => el.classList.add('d-none')); if (e.target.classList.contains('scissors')) { scissors.classList.remove('d-none'); } if (e.target.classList.contains('rock')) { rock.classList.remove('d-none'); } if (e.target.classList.contains('paper')) { paper.classList.remove('d-none'); } });

 .d-none { display: none; }

 <div class="choices" vassel="true"> <!-- Scissors --> <div class="scissors"> <svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58"> <path class="scissors" fill="#3B4262" d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z" /> </svg> </div> <!-- rock --> <div class="rock selection"> <svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48"> <path class="rock" fill="#3B4262" d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z" /> </svg> </div> <!-- Paper --> <div class="paper selection"> <svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59"> <path class="paper" fill="#3B4262" d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z" /> </svg> </div> </div>

Answer 3

You need to manipulate the styling of each div that you needs to be removed. I have written a code to add display:none; property to the div those you need to remove.

const rockDiv = document.querySelectorAll(".rock");

const paperDiv = document.querySelectorAll(".paper");

const scissorsDiv = document.querySelectorAll(".scissors");

for (let i = 0; i < rockDiv.length; i++) {
    rockDiv[i].addEventListener("click", ()=>{
  paperDiv[i].style.display = "none";
  scissorsDiv[i].style.display = "none";
});
}

for (let i = 0; i < paperDiv.length; i++) {
    paperDiv[i].addEventListener("click", ()=>{
  rockDiv[i].style.display = "none";
  scissorsDiv[i].style.display = "none";
});
}

for (let i = 0; i < scissorsDiv.length; i++) {
    scissorsDiv[i].addEventListener("click", ()=>{
  paperDiv[i].style.display = "none";
  rockDiv[i].style.display = "none";
});
}

Answer 4

Details commented in example, refer here for the CSS

 // Score counters let T = 0; let W = 0; let L = 0; // Reference the <form> const RPS = document.forms.RPS; // Register <form> to the click event RPS.onclick = pick; // Event handler passes Event Object function pick(e) { // Reference ALL form controls const IO = this.elements; // The tag the user clicked const clk = e.target; // If the tag clicked is an <input>.. if (clk.matches('input')) { // Disable <label>s IO.choices.disabled = true; // Add .picked class to <form> this.classList.add('picked'); // Get a random number 0-2 let r = Math.floor(Math.floor(Math.random() * 6) / 2); /* Pass: ** All form controls, ** Random number, ** and #id of clicked <label> ** to outcome(IO, r, id) */ switch (clk.id) { case 'R': console.log('Rock'); outcome(IO, r, 'R'); break; case 'P': console.log('Paper'); outcome(IO, r, 'P'); break; case 'S': console.log('Scissors', ); outcome(IO, r, 'S'); break; default: break; } } } /* ** Pass all form controls, random ** number, and #id of clicked */ function outcome(node, vs, user) { // 'R'ock, 'P'aper, 'S'cissors let rpsA = ['R', 'P', 'S']; // Index of user's pick const sv = rpsA.indexOf(user); /* ** Clone the `<label>` that ** corresponds to opponent's index *//* ** Add .vs class to opponent *//* ** Add opponent to #choices */ const opponent = document.querySelector(`[ for='${rpsA[vs]}' ]`).cloneNode(true); opponent.classList.add('vs'); node.choices.append(opponent); /** ** One line nested ternary to ** resolve win, lose, or tie */ let result = vs === sv ? 'tied' : vs === sv + 1 ? 'lost' : vs === 0 && sv === 2 ? 'lost' : 'win'; // Increment score switch (result) { case 'tied': T++; break; case 'win': W++; break; case 'lost': L++; break; default: break; } // Display score node.w.value = W; node.l.value = L; node.t.value = T; // Array for final outcome const roshambo = ["Rock", "Paper", "Scissors"]; // Message of outcome let msg = `You played ${roshambo[sv]}, your opponent played ${roshambo[vs]}, you ${result}!`; // Display message node.msg.value = msg; } // Register <form> to reset event RPS.onreset = reset; // Resets game function reset(e) { this.classList.remove('picked'); this.choices.disabled = false; document.querySelectorAll('label').forEach(tag => { if (tag.classList.contains('vs')) { tag.remove(); } }); }

 html { font: 300 1ch/1.1 'Segoe UI' } form { width: 100%; min-height: 100vh; padding: 2rem; color: white; } #choices { border: 0; margin: 0 auto; } input, output, button { font: inherit; font-size: 100%; } legend, button { font-size: 1.25rem; } [type='radio'] { display: none } [type='radio']:checked+label { color: cyan } [type='radio']:checked+label * { fill: cyan } label.vs { color: gold } label.vs * { fill: gold; } .picked { background: #3B4262; } output { display: inline-block; width: 4rem; margin-bottom: 0.5rem; } output::before { content: attr(value); } #msg { display: inline-block; width: 100%; } [type='reset'] { position: relative; top: 14vh; } .as-console-row::after { width: 0; font-size: 0; } .as-console-row-code { width: 100%; word-break: break-word; } .as-console-wrapper { max-height: 15% !important; max-width: 50%; margin-left: 50%; }

 <form id='RPS'> <fieldset id='choices'> <legend> <label>Wins: <output id='w'></output> </label> <label>Lost: <output id='l'></output> </label> <label>Tied: <output id='t'></output> </label><br> <output id='msg'></output> </legend> <!-- rock --> <input id='R' name='rps' type='radio'> <label for='R' class="rock"> <svg class="rock svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48"> <path class="rock" fill="#3B4262" d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg></label> <!-- Paper --> <input id='P' name='rps' type='radio'> <label for='P' class="paper"> <svg class="paper svg" xmlns="http://www.w3.org/2000/svg" width="49" height="59"> <path class="paper" fill="#3B4262" d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg></label> <!-- Scissors --> <input id='S' name='rps' type='radio'> <label for='S' class="scissors"> <svg class="scissors svg" xmlns="http://www.w3.org/2000/svg" width="51" height="58"> <path class="scissors" fill="#3B4262" d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg></label> </fieldset> <button type='reset'>Reset</button> </form>