Как изменить img src с помощью javascript?

Question

Я знаю, что есть другие вопросы, подобные этому, и я пробовал следовать им. Я просто не знаю, что именно я делаю неправильно. Я объявлял переменную pic как понравившуюся изображению с соответствующим идентификатором «pic», и я пробовал много разных примеров и пытался следовать другим таким вопросам, но безрезультатно.

--- НАСТОЯЩИЙ ВОПРОС ----

Я хотел бы изменить имидж своего Src образа к другому, что я имею в моем рабочем пространстве с щелчком кнопки.

HTML

<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" /> 

JAVA SCRIPT

var pic = document.getElementById('pic'); 

function rouge() { 
    pic.src = "images/link_rouge.png"; 
} 

function blue() { 
    pic.src = "images/link_blue.png"; 
} 

Я знаю, что функции уже работают с кнопками, так как они влияют на некоторые дивы на странице, которые меняют цвет только вещи не меняются образы ,

Answer 1

EventTarget.addEventListener() метод регистрирует указанный слушателя на EventTarget он призвал.

Использование addEventListener более button элементы для крепления click события и связать свои функции обработчиков этих событий.

Попробуйте это:

var pic = document.getElementById('pic'); 
 

 
function rouge() { 
 
    pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png"; 
 
} 
 

 
function blue() { 
 
    pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png"; 
 
} 
 
document.getElementById('btn1').addEventListener('click', rouge); 
 
document.getElementById('btn2').addEventListener('click', blue);

img { 
 
    width: 200px; 
 
}

<button id='btn1'>rouge</button> 
 
<button id='btn2'>blue</button> 
 
<br/> 
 
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

Answer 2

Там шанс ваша страница не загружается до того pic устанавливается равным document.getElementById('pic');.

Вы можете использовать что-то вроде функции JQuery $(document).ready(), чтобы обеспечить полную загрузку страницы перед назначением переменной pic.

$(document).ready(function() { 
    var pic = document.getElementById('pic'); 

    function rouge() { 
     pic.src = "images/link_rouge.png"; 
    } 

    function blue() { 
     pic.src = "images/link_blue.png"; 
    } 
}); 

Примечание: вам нужно будет вытащить библиотеку JQuery в ваш проект, чтобы использовать этот метод. См. here.

Кроме того, вы можете прочитать this post, чтобы узнать немного больше о загрузке HTML/JavaScript и загрузке страницы.