Funktion mit <a>

Question

Ich muss die folgenden Bilder machen, um zwischen ihnen zu wechseln, wenn ich in den <a> Link klicke, aber es hat nicht funktioniert. Wenn ich den "onclick" Verweis in das Bild eingebe, funktioniert es, aber nicht in der Verbindung. Hier

ist der 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]; 
} 

Das Bild sieht wie folgt aus:

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

Der href Link ist dies:

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

Answer 1

Sie ändern das src Attribut this Dies ist das Element, mit dem Sie derzeit interagieren (das ist <a>). Sie könnten document.getElementById('image') in der Funktion übergeben, aber ich denke, es ist besser, es in der Funktion zu bekommen.

Ändern Nicht Ihre Funktion:

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>

Eine verständlichere Funktion:

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>

Answer 2

Dieses in Tag ist selbst als Wert an die Funktion übergeben und deshalb wird es ohne Probleme ausgeführt, so dass mit einem <a> Tag das Anker-Tag an die Funktionsänderung übergeben würde.

Sie sollten Firebug auf Mozilla, oder einfach alte 'inspect element' in Chrome - und einige andere Browser - mit der rechten Maustaste Kontext-Menü, um das JavaScript zu debuggen und visualisieren, was als Argument übergeben wird.

Answer 3

Wenn ich Sie wäre, würde ich addEventListener verwenden ...

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">