Home > other >  Second button is not working. Problem with Sequence of the IDs
Second button is not working. Problem with Sequence of the IDs

Time：06-26

I am having an issue with the buttons. The second button is not working whereas the first button is working fine.


I have embedded two snippets.

  • Snippet 1 shows an error with the second button.
  • Snippet 2 with no error.

Q: What is the issue?

I am using three IDs for my buttons following the index, which are, #downloadbutton, #download, #timer.

The issue is with the Sequence of these IDs in the HTML of the button.

If the first button IDs are #downloadbutton0, #download0, #timer0, and the second button IDs are #downloadbutton2, #download2, #timer2, the second button does not work.

(Please see the Snippet 1)

And if these IDs are in sequence like #downloadbutton0, #download0, #timer0 and #downloadbutton1, #download1, #timer1, both the buttons work fine.

(Please see the Snippet 2)

Q: What do I want?

I have used these buttons in all my posts which are more than 150 and It will take lots of time to amend each and every post.

I am looking for something that can enable the buttons to work even if they are not in sequence, without changing HTML.

I will be very thankful.

  • Snippet 1

//<![CDATA[
document.querySelectorAll(".download_button").forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download'   index).style.display = "none";
      document.getElementById("timer"   index).innerHTML = "Wait "   timeleft   "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer"   index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton'   index   ' a').href, '_self');
        document.getElementById('download'   index).style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
//]]>
.download_button {
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 195px;
  border-radius: 6px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  transition: 0.4s;
  outline: none;
  margin: 5px;
}

.button-1 {
  background: #f12711;
}
  
.button-2 {
  background: #fe8c00;
}

.button-3 {
  background: #0575E6;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 10px;
}

#download0, #download1, #download2 {
  border-radius: 5px;
  color: #fff;
  background-color: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
  cursor: pointer;
}

#download0:hover, #download1:hover, #download2:hover {
  background: #a3a3a3;
  color: #000000;
  transition: 0.2s;
}

#timer0, #timer1, #timer2 {
  border-radius: 5px;
  background: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
}
  
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
<div >
  <div id="downloadbutton0" style="text-align: center;">
    <button >
      <div >1st Button</div>
      <div >
        <div id="download0">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer0"></div>
    </button>
  </div>
  <div id="downloadbutton2" style="text-align: center;">
    <button >
      <div >2nd Button</div>
      <div >
        <div id="download2">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer2"></div>
    </button>
  </div>
</div>

  • Snippet 2

//<![CDATA[
document.querySelectorAll(".download_button").forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download'   index).style.display = "none";
      document.getElementById("timer"   index).innerHTML = "Wait "   timeleft   "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer"   index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton'   index   ' a').href, '_self');
        document.getElementById('download'   index).style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
//]]>
.download_button {
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 195px;
  border-radius: 6px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  transition: 0.4s;
  outline: none;
  margin: 5px;
}

.button-1 {
  background: #f12711;
}
  
.button-2 {
  background: #fe8c00;
}

.button-3 {
  background: #0575E6;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 10px;
}

#download0, #download1, #download2 {
  border-radius: 5px;
  color: #fff;
  background-color: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
  cursor: pointer;
}

#download0:hover, #download1:hover, #download2:hover {
  background: #a3a3a3;
  color: #000000;
  transition: 0.2s;
}

#timer0, #timer1, #timer2 {
  border-radius: 5px;
  background: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
}
  
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
<div >
  <div id="downloadbutton0" style="text-align: center;">
    <button >
      <div >1st Button</div>
      <div >
        <div id="download0">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer0"></div>
    </button>
  </div>
  <div id="downloadbutton1" style="text-align: center;">
    <button >
      <div >2nd Button</div>
      <div >
        <div id="download1">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer1"></div>
    </button>
  </div>
</div>

CodePudding user response：

querySelector isn't only applied to document, it also applies to any element and queries it's children.

I removed the all ids, and used attributes instead without any indexes.

//<![CDATA[
document.querySelectorAll(".download_button").forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;

    var downloadTimer = setInterval(function function1() {
      item.querySelector('[data-download]').style.display = "none";
      item.querySelector('[data-timer]').innerHTML = "Wait "   timeleft   "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        item.querySelector('[data-timer]').innerHTML = ""
        window.open(item.querySelector('a').href, '_self');
        item.querySelector('[data-download]').style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
//]]>
.download_button {
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 195px;
  border-radius: 6px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  transition: 0.4s;
  outline: none;
  margin: 5px;
}

.button-1 {
  background: #f12711;
}
  
.button-2 {
  background: #fe8c00;
}

.button-3 {
  background: #0575E6;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 10px;
}

#download0, #download1, #download2 {
  border-radius: 5px;
  color: #fff;
  background-color: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
  cursor: pointer;
}

#download0:hover, #download1:hover, #download2:hover {
  background: #a3a3a3;
  color: #000000;
  transition: 0.2s;
}

#timer0, #timer1, #timer2 {
  border-radius: 5px;
  background: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
}
  
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
<div >
  <div data-button style="text-align: center;">
    <button >
      <div >1st Button</div>
      <div >
        <div data-download>DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div data-timer></div>
    </button>
  </div>
  <div data-button style="text-align: center;">
    <button >
      <div >2nd Button</div>
      <div >
        <div data-download>DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div data-timer></div>
    </button>
  </div>
</div>

UPDATE

This update to your first Snippet to make it wihout making edit in the HTML, just by modify the index.

//<![CDATA[
document.querySelectorAll(".download_button").forEach(function(item, index) {
  index !== 0 && (index = 2);
  console.log(index)
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download'   index).style.display = "none";
      document.getElementById("timer"   index).innerHTML = "Wait "   timeleft   "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer"   index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton'   index   ' a').href, '_self');
        document.getElementById('download'   index).style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
//]]>
.download_button {
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 195px;
  border-radius: 6px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  transition: 0.4s;
  outline: none;
  margin: 5px;
}

.button-1 {
  background: #f12711;
}
  
.button-2 {
  background: #fe8c00;
}

.button-3 {
  background: #0575E6;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 10px;
}

#download0, #download1, #download2 {
  border-radius: 5px;
  color: #fff;
  background-color: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
  cursor: pointer;
}

#download0:hover, #download1:hover, #download2:hover {
  background: #a3a3a3;
  color: #000000;
  transition: 0.2s;
}

#timer0, #timer1, #timer2 {
  border-radius: 5px;
  background: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
}
  
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
<div >
  <div id="downloadbutton0" style="text-align: center;">
    <button >
      <div >1st Button</div>
      <div >
        <div id="download0">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer0"></div>
    </button>
  </div>
  <div id="downloadbutton2" style="text-align: center;">
    <button >
      <div >2nd Button</div>
      <div >
        <div id="download2">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer2"></div>
    </button>
  </div>
</div>

CodePudding user response：

Snippet 3 for Mina by using his suggested code.

//<![CDATA[
document.querySelectorAll(".download_button").forEach(function(item, index) {
  index !== 0 && (index = 2);
  console.log(index)
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download'   index).style.display = "none";
      document.getElementById("timer"   index).innerHTML = "Wait "   timeleft   "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer"   index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton'   index   ' a').href, '_self');
        document.getElementById('download'   index).style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
//]]>
.download_button {
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 195px;
  border-radius: 6px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  transition: 0.4s;
  outline: none;
  margin: 5px;
}

.button-1 {
  background: #f12711;
}
  
.button-2 {
  background: #fe8c00;
}

.button-3 {
  background: #0575E6;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 10px;
}

#download0, #download1, #download2 {
  border-radius: 5px;
  color: #fff;
  background-color: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
  cursor: pointer;
}

#download0:hover, #download1:hover, #download2:hover {
  background: #a3a3a3;
  color: #000000;
  transition: 0.2s;
}

#timer0, #timer1, #timer2 {
  border-radius: 5px;
  background: #3d3d3d;
  margin: 0 auto;
  width: 130px;
  margin-bottom: 5px;
}
  
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
<div >
  <div id="downloadbutton0" style="text-align: center;">
    <button >
      <div >First Button</div>
      <div >
        <div id="download0">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer0"></div>
    </button>
  </div>
  
   <div id="downloadbutton1" style="text-align: center;">
    <button >
      <div >Middle Button</div>
      <div >
        <div id="download1">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer1"></div>
    </button>
  </div>


  <div id="downloadbutton2" style="text-align: center;">
    <button >
      <div >Last Button</div>
      <div >
        <div id="download2">DOWNLOAD</div>
        <a
          href="https://www.google.com"
        ></a>
      </div>
      <div id="timer2"></div>
    </button>
  </div>
</div>

Page link：https//www.codepudding.com/other/454873.html

Prev:CSS - Issues animating child on parent hover?
Next:Images in a div get cramped up and not scrolling
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding