Перейдите на другую страницу в HTML через javascript

Question

У меня есть код, который изменяет mainImage, чтобы отразить одно из трех других изображений, которые у меня есть на странице, когда один из них нажат. Я пытаюсь сделать так, чтобы, когда пользователь нажимает на mainImage, он перейдет на страницу, связанную с изображением, отображаемым на mainImage, в указанное время. Функции изменения изображения работают, хотя я сомневаюсь, что они очень хорошо написаны. Я буду включать их на всякий случай, если это может повлиять на что-то еще.

window.onload = init; 
 

 
function init() { 
 
    var featureOne = document.getElementById("featureOne"); 
 
    featureOne.addEventListener("click", mainToOne, false); 
 
    var featureTwo = document.getElementById("featureTwo"); 
 
    featureTwo.addEventListener("click", mainToTwo, false); 
 
    var featureThree = document.getElementById("featureThree"); 
 
    featureThree.addEventListener("click", mainToThree, false); 
 
    var mainClick = document.getElementById("mainFeature"); 
 
    mainClick.addEventListener("click", mainClick, false); 
 
}; 
 

 
function mainClick() { 
 
    var image = document.getElementById("mainFeature"); 
 
    var imgSource = image.src; 
 
    if(imgSource === "feature1.jpg") { 
 
    window.location.href = "http://www.google.com"; 
 
    } 
 
    else if(imgSource === "feature2.jpg") { 
 
    window.location.href = "http://www.facebook.com"; 
 
    } 
 
    else if(imgSource === "feature3.jpg") { 
 
    window.location.href = "http://www.bing.com"; 
 
    } 
 
} 
 

 
function mainToOne() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature1.jpg"; 
 
} 
 

 
function mainToTwo() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature2.jpg"; 
 
} 
 

 
function mainToThree() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature3.jpg"; 
 
}

<img id="mainFeature" src="feature1.jpg"><br> 
 
<img id="featureOne" src="feature1.jpg"> 
 
<img id="featureTwo" src="feature2.jpg"> 
 
<img id="featureThree" src="feature3.jpg">

Я также попытался размещения изображения внутри и имеющий Javascript возвращает строку с адресом в Href собственности.

<a href = "javascript:function();"><img></a>

Был ли это больше на пути к жизнеспособному ответу?

Answer 1

Есть две проблемы с кодом:

• Вы используете в функции init переменной mainClick, так что будет затенять функцию mainClick, что вы пытаетесь связать с событием.
• Когда вы получите источник изображения, вы получите полный URL-адрес изображения, а не только имя изображения, которое вы назначили источнику, поэтому сравнения не удастся.

Вам не нужно получать источник изображения, если вы планируете заранее немного. Информация, которую вы хотите, уже была доступна на более раннем этапе. Вместо того, чтобы просто устанавливать источник изображения, вы также можете сохранить индекс изображения в переменной. Таким образом, вам не нужно сравнивать имя изображения с кучей строк, чтобы попытаться определить, какое изображение было нажато.

Код может быть реорганизован, чтобы быть немного менее повторным. Вы можете использовать массивы для имен изображений и ссылок.

window.onload = init; 

function listen(id, ev, handler) { 
    document.getElementById(id).addEventListener(ev, handler, false); 
} 

function init() { 
    listen("featureOne", "click", mainToOne); 
    listen("featureTwo", "click", mainToTwo); 
    listen("featureThree", "click", mainToThree); 
    listen("mainFeature", "click", mainClick); 
}; 

var currentMain = 0; 
var images = [ 
    "feature1.jpg", 
    "feature2.jpg", 
    "feature3.jpg" 
]; 
var links = [ 
    "http://www.google.com", 
    "http://www.facebook.com", 
    "http://www.bing.com" 
]; 

function mainClick() { 
    window.location.href = links[currentMain]; 
} 

function setMain(index) { 
    currentMain = index; 
    document.getElementById("mainFeature").src = images[index]; 
} 

function mainToOne() { 
    setMain(0); 
} 

function mainToTwo() { 
    setMain(1); 
} 

function mainToThree() { 
    setMain(2); 
}