Confused about linking an interactive element Javascript/HTML -

i've been working on website coursework, i've gotten bit stuck. i'm trying hyperlink images i've put inside of carousel (although done weirdly, i'm told). code below.
javascript:

  function changeimageloop(button_id) {         var image = document.getelementbyid('banner' + n);         if (button_id = "right") {             n += 1;         } else {             n -= 1;         }         if (n > maxn) {             n = 1         }         if (n < 1) {             n = 3         }         image.src = "fancy dress banner " + n + ".png";         image.id = "banner" + n;     } 

and html:

<div class="content">     <div class="imageslide"> <a href="costumes.html">         <img id="banner1" src="fancy dress banner 1.png" alt="musical fancy dress">     </a>      </div>     <div class="imageleft">         <button type="button" id="left" onclick='changeimageloop2(id)' style="width:30px; height:18px;"></button>     </div>     <div class="leftrightgap"></div>     <div class="imageright">         <button type="button" id="right" onclick='changeimageloop(id)' style="width:30px; height:18px;"></button>     </div> 

don't think it's relevant, here's css in case:

.imageslide {     width:100%;     margin-top:2%;     margin-left:2%;     margin-right:2%;     background:#bcd6d6;     border:2px solid black; } .imageleft {     width:5%;     height:2%;     float:left;     margin-left:3%;     margin-top:1%;     background:#bcd6d6;     border:2px solid black; } .leftrightgap {     width:80%;     height:2%;     float:left;     margin-left:2%;     margin-top:1%;     background:#bcd6d6;     border:2px solid black; } .imageright {     width:5%;     height:2%;     float:right;     margin-right:3%;     margin-top:1%;     background:#bcd6d6;     border:2px solid black; } 

i've tried few different things, cant figure out how retrieve contents of 'href=""' section , change it, each image needs hyperlink different page of site. if help, appreciate it.