CODEWITHSUNDEEP
javascriptjqueryhtml
Manuel Peña Cantón
Manuel Peña Cantón

Reputation: 3

Function using <a>

I have to make the following images to switch between them when I click in the <a> link but it didn't work. When I put the 'onclick' reference in the image it works but not in the link.

Here is the code:

var images=Array("1.png","2.jpg","3.png");
var visibleImage=0;
var a = document.getElementById("link");

function change(img)
{
    visibleImage++;
    if(visibleImage>=images.length)
    {
        visibleImage=0;
    }
    img.src=images[visibleImage];
}

The image look like this:

<img src="1.png" onclick="change(this);">

The href link is this:

<a href="#" onclick="change(this);">Click to change</a>

Upvotes: 0

Views: 90

Answers (3)

Badacadabra
Badacadabra

Reputation: 8497

If I were you, I would use addEventListener...

var images = [
  'http://i3.kym-cdn.com/photos/images/newsfeed/000/170/791/welcome-to-the-internet-internet-demotivational-poster-1264714433.png.jpg',
  'https://s-media-cache-ak0.pinimg.com/736x/a5/98/1f/a5981fcc09689034ec9dc9201c9787f5.jpg',
  'http://s2.quickmeme.com/img/b3/b3bd9df9b60b8abc7f1253908756964c37e17262e6df6be51bc4a528183e2c96.jpg'
];
  
var visibleImage = 0,
    a = document.querySelector('a'),
    img = document.querySelector('img');

a.addEventListener('click', change, false);

function change() {
  visibleImage++;
  if(visibleImage >= images.length) {
    visibleImage = 0;
  }
  img.src = images[visibleImage];
}
<a href="#">Click to change</a>
<hr>
<img src="http://i3.kym-cdn.com/photos/images/newsfeed/000/170/791/welcome-to-the-internet-internet-demotivational-poster-1264714433.png.jpg">

Upvotes: 0

Sadiq Ali
Sadiq Ali

Reputation: 1342

This in <img> tag is passing itself as a value to the function and because of that it executes without any problem, doing so with an <a> tag would pass the anchor tag to the function change.

You should look into Firebug on Mozilla, or plain old 'inspect element' in Chrome's — and some other browsers' — right-click context-menu, to debug the JavaScript and visualize what is being passed as an argument.

Upvotes: 0

Jurij Jazdanov
Jurij Jazdanov

Reputation: 1268

You are changing the src attribute of this, which is the element you currently interact with (which is <a>). You could pass document.getElementById('image') in the function, but I think it is better to get it in the function.

Not changing your function:

var images=Array("1.png","2.jpg","3.png");
var visibleImage=0;
var a = document.getElementById("link");

function change(img)
{ 
    visibleImage++;
    if(visibleImage>=images.length)
    {
        visibleImage=0;
    }
    img.src=images[visibleImage];
    
    console.log(img.src);
}
<img src="1.png" onclick="change(this);" id='image'>
<a href="#" onclick="change(document.getElementById('image'));">Click to change</a>

A more understandable function:

var images=Array("1.png","2.jpg","3.png");
var visibleImage=0;
var a = document.getElementById("link");

function change()
{ 
    img = document.getElementById("image");
    visibleImage++;
    if(visibleImage>=images.length)
    {
        visibleImage=0;
    }
    img.src=images[visibleImage];
    
    console.log(img.src);
}
<img src="1.png" onclick="change();" id='image'>
<a href="#" onclick="change();">Click to change</a>

Upvotes: 1

Related Questions