(Javascript) 为什么必须点击多次才能使按钮起作用？

Question

简单代码：

-------------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"></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"></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>

大家好。这是我的代码。我想做的是：如果我单击任何按钮，“上方”的跨度将内联显示。但我必须多次点击按钮才能工作。请帮忙！非常感谢！

或者，如果你们有任何想法使用具有相同事件侦听器和事件处理程序的多个按钮，那就太好了。再次感谢你

Answer 1

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>

我希望这能给你一些想法。祝你好运

(Javascript) 为什么必须点击多次才能使按钮起作用？

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

html

javascript

css

input

button