Clicking an image to change the url of a button

Question

How could I make it that if someone clicks the image of the selected product to change the url of the button under the images

<div id="product">
  <img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
  <img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
  <img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>

<br>

<a id="buy" href="#"><button>Go to the the specific link</button></a>

text/image for amusement only, they are not really the products

What I have tried

window.onload = function() {
    var sel = document.getElementById('product');
    sel.onchange = function() {
        document.getElementById("buy").href = "https://amazon.com/" + this.value;
    }
}

Here's a codepen http://codepen.io/anon/pen/bdyWGa

Answer 1

Jquery solution:

$(function(){
 $("img").click(function(){
    $("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
 });  
});

Javascript Version:

var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
   img = images[i];
   img.addEventListener("click", function() {  
      document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
      alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
   });
}

Working fiddle: http://codepen.io/anon/pen/NqVjGY

Answer 2

<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />

<br>

<a id="buy" href="#"><button>Go to the the specific link</button></a>

and:

$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});

here you describe clicking on which img will change url to what

Answer 3

In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.

window.onload = function() {
    var sel = document.getElementById('product');
    sel.onclick = function(e) {
      console.log( e.target.attributes[0].value)
     document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
    }
}

CodeOpen

Answer 4

Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element

 $(function(){ $('img').on('click', function(){ $('#buy').attr('href',"https://amazon.com/" + $(this).attr('value')); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="product"> <img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" /> <img value="2" src="http://placehold.it/300x100?text=LSD" alt="" /> <img value="3" src="http://placehold.it/300x100?text=Crack" alt="" /> </div> <a id="buy" href="#"><button>Go to the the specific link</button></a>