javascript/html: Второй атрибут onclick

Question

У меня есть изображение - image1.png. Когда я нажимаю кнопку в первый раз, я хочу, чтобы она изменилась на image2.png. Когда я нажимаю кнопку второй раз, я хочу, чтобы она изменилась на другое изображение, image3.png.

До сих пор я получил возможность совершенно изменить изображение2. Я просто застрял, найдя способ изменить его во второй раз.

HTML:

<img id="image" src="image1.png"/> 

<button onclick=changeImage()>Click me!</button> 

JavaScript:

function changeImage(){ 

document.getElementById("image").src="image2.png"; 

} 

Я знаю, что я могу изменить источник изображения с HTML в код кнопки, но я считаю, что это будет очиститель с функцией JS. Однако я открыт для всех решений.

Answer 1

function changeImage(){ 
    document.getElementById("image").attr("src","image2.png"); 
} 

Answer 2

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

Также обратите внимание, что этот код удаляет обработчик события inline HTML, который является очень устаревшим способом подключения HTML до JavaScript. Это не рекомендуется, потому что на самом деле он создает глобальную оболочную функцию вокруг вашего кода обратного вызова и не соответствует стандартам обработки событий W3C DOM Level 2. Он также не следует методологии «разделения проблем» для веб-разработки. Лучше использовать .addEventListener для подключения элементов DOM к событиям.

// Wait until the document is fully loaded..., 
 
window.addEventListener("load", function(){ 
 

 
    // Now, it's safe to scan the DOM for the elements needed 
 
    var b = document.getElementById("btnChange"); 
 
    var i = document.getElementById("image"); 
 

 
    var imgCounter = 2; // Initial value to start with 
 
    var maxCounter = 3; // Maximum value used 
 

 
    // Wire the button up to a click event handler: 
 
    b.addEventListener("click", function(){ 
 

 
    // If we haven't reached the last image yet... 
 
    if(imgCounter <= maxCounter){ 
 
     i.src = "image" + imgCounter + ".png"; 
 
     console.log(i.src); 
 
     imgCounter++; 
 
    } 
 
    }); 
 
    
 
}); // End of window.addEventListener()

<img id="image" src="image1.png"> 
 

 
<button id="btnChange">Click me!</button>

Answer 3

попробовать это

function changeImage(){ 
    var img = document.getElementById("image"); 
    img.src = img.src == 'image1.png' ? "image2.png" : "image3.png"; 
} 

Answer 4

Просто используйте, если заявление, чтобы определить, что в настоящее время источником изображения является, например, так:

function changeImage(){ 
    var imageSource = document.getElementById("image").src; 
    if (imageSource == "image1.png"){ 
     imageSource = "image2.png"; 
    } 
    else if (imageSource == "image2.png"){ 
     imageSource = "image3.png"; 
    } 
    else { 
     imageSource = "image1.png"; 
    } 
} 

Это должно сделать изображение вращается между 3 различными файлами изображений (image1.png, image2.png и image3.png). Помните, что это будет работать, только если у вас есть конечное количество файлов изображений, которые вы хотите повернуть, иначе вам будет лучше использовать счетчики.

Надеюсь, это поможет.

Answer 5

Для достижения вашего сценария мы должны использовать флаг счетчика для назначения следующего изображения. поэтому мы можем бросить его.

Мы можем сделать его более простым

var cnt=1; 
function changeImage(){ 
    cnt++; 
    document.getElementById("image").src= = "image" + cnt + ".png";   
} 

Answer 6

Проверьте код, приведенный ниже, если вы сделаете это как циклическое:

JS

var imgArray = ["image1.png", "image2.png", "image3.png"]; 


     function changeImage(){ 
      var img = document.getElementById("image").src.split("/"), 
       src = img[img.length-1];       

       idx = imgArray.indexOf(src); 
       if(idx == imgArray.length - 1)  { 
        idx = 0; 
       } 
       else{ 
        idx++; 
       } 
       document.getElementById("image").src = imgArray[idx];     
     } 

HTML

<button onclick=changeImage();>Click me!</button>