How to make coupon code reveal for more than one coupon

JavaScript
1 
<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>

Capture
Capture1079Ă—589 58.3 KB

3

In every place replace var to let?

5

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

coupon[j].innerHTML

6

it is working but showing same coupon in all place

7

last coupon code in all place

8

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

9

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?

10

In a page using angularjs

11

how to use it in script?

12

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.

13

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();
  };
14

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
15

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