How to make coupon code reveal for more than one coupon

<div class="get-codebtn-holder"><div class="offer-get-code-link cpnbtn"> 
    <span class="code coupon-code">TRY2GO</span>
    <a class="peel-btn btn-coupon">Show Coupon</a>
 	</div></div>
 	<div class="get-codebtn-holder"><div class="offer-get-code-link cpnbtn"> 
    <span class="code coupon-code">TRY2GO</span>
    <a class="peel-btn btn-coupon">Show Coupon</a>
 	</div></div>
 	 <script>
  var btn = document.getElementsByClassName("btn-coupon"); 
      for (var i = 0; i < btn.length; i++) {
    
    // Define the onclick event on popup's btn

    btn[i].onclick = function(){
    	 // Get the popup associated to the btn with the data-popup-id
    	var coupon = document.getElementsByClassName("coupon-code");
    	 for (var j = 0; j < coupon.length; j++) {  
    	 var coupon1=coupon[i].innerHTML;
    	 } 
    this.innerHTML = coupon1;
     $(".coupon-code").hide();
  };
  }
  </script>

Change the var to let.

In every place replace var to let?

Just that one place to make the code work, but in general you should start using const and let in place of var in the future.

Can’t you just use the j index instead, or am I missing something?

coupon[j].innerHTML

it is working but showing same coupon in all place

last coupon code in all place

https://codepen.io/shobhapatwal/pen/abbZgBJ

Right sorry, I wasn’t paying attention. Considering your using jQuery wouldn’t something like this work.

$(".coupon-code").hide();
$('.btn-coupon').click( function() {
 $(this).siblings('.coupon-code').toggle();
});

I don’t really use jQuery so there might be a better way. Also, not sure how it is supposed to work on the page you posted. Where is the code supposed to show up?

In a page using angularjs

how to use it in script?

Well you have this $(".coupon-code").hide(); which is jQuery so you must be using it.

For it to work on Codepen you have to add jQuery to the page. Click the Settings button and go to the JavaScript tab type jQuery into the search box and click the link to add it to the page. Now just replace the JS code.

it is working properly in my localhost , the only problem it is showing same coupon code in all, there can be any issue in this line

 btn[i].onclick = function(){
       // Get the popup associated to the btn with the data-popup-id
      var coupon = document.getElementsByClassName("coupon-code");
       for (var j = 0; j < coupon.length; j++) {  
       var coupon1=coupon[j].innerHTML;
       } 
    this.innerHTML = coupon1;
     $(".coupon-code").hide();
  };

Right, that code doesn’t work. As said, if you declare the i index using let it will be block scoped and should work. That is when using the i index of course.

I just didn’t really understand why you did the text content replace at first. I think I get it now. This jQuery code should do the same (I think).

$(".coupon-code").hide();
$('.btn-coupon').click( function() {
 $(this).text($(this).siblings('.coupon-code').text());
});
1 Like

Thank you :grinning: for your help, it works…