[JavaScript] click시 로고의 이미지 변경

 

 

 

 

a.textContet를 사용하여 a의 텍스트를 변경해주었다.

b.value를 사용하여 value 값을 변경해주었다.

 

 

var a = document.querySelector('#responsive-nav > .navbar-nav > .active + li >a');
console.log(a);
a.textContent="cold";


var b = document.querySelector('.header-search .input-select +.input');
console.log(b);
b.value = "123";

var c = document.querySelector('.logo img');

console.log(c);

 

로고의 이미지를 클릭할때마다 변경하고자 했다.

 

 

클릭하면 number의 숫자가 커지도록 했다.

제일 처음 if문을 사용하여 유효성 검사를 먼저 해주었다.

그리고 number의 숫자(클릭 수)에 따라 다른 이미지가 나오도록 했다.

var number=0;
header.addEventListener("click",click1);
function click1(){
number++;
if(number>2){
    number=0;
}

    if(number==0){
        header1.setAttribute("src", "./img/logo.png");
    }
    else if(number==1){
        header1.setAttribute("src", "./img/product02.png");
    }
    else if(number==2){
        
        header1.setAttribute("src", "./img/product01.png");
    }

   

}

 

 

다음 방법은 클릭시 true가 false가 되도록 했다.

false시 다른 이미지가 나오고 true시 또 다른 이미지가 나오도록 작성했다.

var boolean1="true";
header.addEventListener("click",click1);
function click1(){
boolean1=!boolean1;
    if(boolean1){
        header1.setAttribute("src", "./img/product01.png");
    }
    
    else{
        header1.setAttribute("src", "./img/logo.png");
    }
}