Home > Software engineering >  why can't I use the same javascript toggle button twice?
why can't I use the same javascript toggle button twice?

Time：02-10

I'm attempting to utilize this javascript toggle button in two separate parts on the same page, but I'm having trouble. I tried altering the id as well, but it didn't work. Is it impossible to complete it, or am I overlooking something? I am not an expert in javascript and am a complete novice, so any help would be greatly appreciated.

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText   = document.querySelector("#moreButton span");
  var moreIcon     = document.querySelector("#moreButton img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less');
    moreIcon.classList.remove('less');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less');
    moreIcon.classList.add('less');
  }
}

function toggleText2() {
  var showMoreText2 = document.getElementById("more2");
  var buttonText2   = document.querySelector("#moreButton2 span");
  var moreIcon2     = document.querySelector("#moreButton2 img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less2');
    moreIcon.classList.remove('less2');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less2');
    moreIcon.classList.add('less2');
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint"></div>
    <div id="more">
      <div >
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText()" id="moreButton">
            <span >Show More</span> 
            <img  src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

<br>
<br>
<br>
<br>

<div >
  <div >
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint2"></div>
    <div id="more2">
      <div >
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText2()" id="moreButton2">
            <span >Show More</span> 
            <img  src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

CodePudding user response：

The correct way to do that:

document.querySelectorAll('button.moreButton').forEach(bt =>
  {
  let
    moreItem = bt.closest('div.row').querySelector('div.more_items')
  , spPink   = bt.querySelector('span.pink')
    ;
  bt.onclick =_=>
    {
    spPink.textContent = moreItem.classList.toggle('noDisplay') ? 'Show More' : 'Show Less'
    } 
  })
.more_items.noDisplay {
  display: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

  <div >
    <div >
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
  
      <div >
        <div >
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
        </div>
      </div>
      <button >
        <span >Show Less</span> 
        <img  src="./images/load-more.png" alt="">
      </button>
    </div>
  </div>
  
  <br>
  <br>
  
  <div >
    <div >
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
      <div >
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
      </div>
  
      <div >
        <div >
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
          <div >
            <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
          </div>
        </div>
      </div>
      <button >
        <span >Show Less</span> 
        <img  src="./images/load-more.png" alt="">
      </button>
    </div>
  </div>

CodePudding user response：

You had some issues with the naming of your variables etc. (things coming up as undefined).

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText   = document.querySelector("#moreButton span");
  var moreIcon     = document.querySelector("#moreButton img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less');
    moreIcon.classList.remove('less');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less');
    moreIcon.classList.add('less');
  }
}

function toggleText2() {
  var showMoreText2 = document.getElementById("more2");
  var buttonText2   = document.querySelector("#moreButton2 span");
  var moreIcon2     = document.querySelector("#moreButton2 img");

  if (startpoint.style.display === "none") {
    showMoreText2.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText2.innerHTML = "Show More";
    buttonText2.classList.remove('less2');
    moreIcon2.classList.remove('less2');
  } else {
    showMoreText2.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText2.innerHTML = "Show Less";
    buttonText2.classList.add('less2');
    moreIcon2.classList.add('less2');
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint"></div>
    <div id="more">
      <div >
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText()" id="moreButton">
            <span >Show More</span> 
            <img  src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

<br>
<br>
<br>
<br>

<div >
  <div >
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div >
      <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint2"></div>
    <div id="more2">
      <div >
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText2()" id="moreButton2">
            <span >Show More</span> 
            <img  src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

With that said, there are much cleaner ways of constructing this logic. For instance, you could parse the event and look for a certain parent or child to toggle. That way, you can utilize the same function as long as it's surrounded by the same html structure. You'd have to exchange the id's for classes however.

Page link：https//www.codepudding.com/Softwareengineering/294114.html

Prev:CSS file got flooded with errors after VSC update
Next:How to generate a hanging citation for an html document in rmarkdown?
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding