Home > database >  how can i make it so that i can't unselect my choise?
how can i make it so that i can't unselect my choise?

Time：10-27

How can i make it so that i can't unselect my choise? if i click again on the same text i don't want the popup to disappear.

I whant to be able to select any of the options, but just one at a time and if i select it i whant all of them to be unavailable until i refresh the page, then i cand select another one but just one, i dont know if it makes sense, im very bad at explaining things :) I know it's kind of useless but I really need this for a project of mine, can anyone please help me with this?

let clickedId = null
function clickTest(id) {
  if(clickedId){
    if(id!=clickedId){
      return null
    }else{
      clickedId = null
    }
  }else{
    clickedId = id
  }
  var senior = document.getElementById(id);
  senior.classList.toggle("show"); 
}
.junior  {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .adult {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .senior {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.junior .juniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .adult .adulttext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .senior .seniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.junior .juniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.adult .adulttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.senior .seniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.junior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .adult .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .senior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
<h1>&nbsp;</h1>  
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myjunior')">JUNIOR
  <span  id="myjunior" >A Simple junior Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myadult')" >ADULT
  <span  id="myadult" >A Simple adult Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  style="text-align: left;">
  <div  onclick="clickTest('mysenior')" >SENIOR
  <span  id="mysenior" >A Simple senior Popup!</span>
</div>
  </div>
</td>
</tr>
</tbody>
</table>

CodePudding user response：

Based on your question,we can check if the previous clickedId are the same with current id,if they are the same then we do not do anything,otherwise,we need to hide the previous element and show the current clicked element

let clickedId = null
function clickTest(id) {
  if(id == clickedId){
    return
   }
  if(clickedId){
    document.getElementById(clickedId).classList.toggle("show")
   }
  document.getElementById(id).classList.toggle("show")
  clickedId = id
}

Full code

let clickedId = null
function clickTest(id) {
  if(id == clickedId){
    return
   }
  if(clickedId){
    document.getElementById(clickedId).classList.toggle("show")
   }
  document.getElementById(id).classList.toggle("show")
  clickedId = id
}
.junior  {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .adult {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .senior {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.junior .juniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .adult .adulttext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .senior .seniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.junior .juniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.adult .adulttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.senior .seniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.junior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .adult .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .senior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
<h1>&nbsp;</h1>  
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myjunior')">JUNIOR
  <span  id="myjunior" >A Simple junior Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myadult')" >ADULT
  <span  id="myadult" >A Simple adult Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  style="text-align: left;">
  <div  onclick="clickTest('mysenior')" >SENIOR
  <span  id="mysenior" >A Simple senior Popup!</span>
</div>
  </div>
</td>
</tr>
</tbody>
</table>

Update: Based on your comment(just want to one item to popup,I provide another solution)

let clickedId = 'myadult'
let clicked = false
function clickTest(id) {
  if(clicked || id!=clickedId){
    return
  }
  clicked = true
  document.getElementById(clickedId).classList.toggle("show")
}

Test code

let clickedId = 'myadult'
let clicked = false
function clickTest(id) {
  if(clicked || id!=clickedId){
    return
  }
  clicked = true
  document.getElementById(clickedId).classList.toggle("show")
}
.junior  {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .adult {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .senior {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.junior .juniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .adult .adulttext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .senior .seniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.junior .juniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.adult .adulttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.senior .seniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.junior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .adult .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .senior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
<h1>&nbsp;</h1>  
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myjunior')">JUNIOR
  <span  id="myjunior" >A Simple junior Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  onclick="clickTest('myadult')" >ADULT
  <span  id="myadult" >A Simple adult Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div  style="text-align: left;">
  <div  onclick="clickTest('mysenior')" >SENIOR
  <span  id="mysenior" >A Simple senior Popup!</span>
</div>
  </div>
</td>
</tr>
</tbody>
</table>

Page link：https//www.codepudding.com/database/589958.html

Prev:Log to console only when run from cli command
Next:How can I execute a condition using new Date in Javascript?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding