(Javascript) Why have to click multiple times for buttons to work?

Question

simple code:

-------------css--------------
<style>
 .table{
   display: block;
 }
 .row{
    position: relative;
    margin-bottom: 45px;
 }
 .learn{
    font-size: 12px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index:-1;
    text-align: left;
    display: inline;
 }
 .row input{
    position: absolute;
    top: 30px;
    z-index: 1;
    right: 0;
    font-size: 15px;
    padding: 7px 5px;
    border-radius: 10px;
    background: transparent;
}
</style>

-----------------html-------------------
<div class="table">
    <div class="row">
         <div class="thead">Regular Polish</div>
         <div class="td">$20</div>
         <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
         <input class="showBut" type="submit" onclick="showLearn();" value="Learn more"></input>
     </div>
     <div class="row">
     <div class="thead">Gel Polish</div>
     <div class="td">$30</div>
     <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
     <input class="showBut" type="submit"  onclick="showLearn();" value="Learn more"></input>
</div>


----------------script---------------

<script>
 let learn = document.querySelectorAll('.learn')
 let showBut = document.querySelectorAll('.showBut');
 function showLearn(){
    for (const [index, i ] of showBut.entries()){
       i.addEventListener('click', (e) => {
         learn[index].style.display = 
         (learn[index].style.display === 'none') ?
         'inline' : 'none';
        }
    }
 };
</script>

Hi y'all. This is my code. What i am trying to do is: if I click whatever button, the span "above" it will display inline. But I have to click multiple times for the button to work. Please help! Thank you so much!

Or if you guys have any idea to work with multiple buttons with the same event listener and event handler, it'd be great . thank you again

You already have an inline listener in your code. Then, for some reason, you're adding _more_ to that button when you call the handler. — Andy, Apr 01 '22 at 03:12
Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, a CSS class should be used, e.g. `.hidden { display: none; }`; then [`.classList.contains("hidden")`](//developer.mozilla.org/en/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("hidden", condition)` for setting the class iff `condition` is true, etc. Consider using the [`hidden` attribute](//developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden) instead. — Sebastian Simon, Apr 01 '22 at 03:17
I spent some time on this before it was closed [so here's my answer](https://pastebin.com/GEy6hhAk). — Andy, Apr 01 '22 at 03:30

score -1 · Accepted Answer · answered Apr 01 '22 at 03:25

document.querySelectorAll('.span').forEach((ele) => {
  ele.addEventListener('click', (e) => {
    ele.classList.toggle('red');
  })
})

.span {
  font-size: 16px;
  cursor: pointer;
  background: yellow;
  color: #fff;
}

.red {
  background-color: red;
}

<span class="span">Red or Yellow</span>
<span class="span">Red or Yellow</span>

I hope this will give you some ideas. Good luck

(Javascript) Why have to click multiple times for buttons to work?

1 Answers1