버튼 이미지가 변경되지 않습니다.

Question

여기 멍청한 놈. 내 버튼에는 텍스트와 이미지가 있으며 두 버튼을 모두 변경하고 싶습니다. 텍스트 변경하지만 이미지에 대한 null .. (이미지 파일을 찾을 수없는 것 같아요 - 둘 다 HTML 코드가있는 것 같습니다.) 초기 이미지는 있지만 클릭하면 사라집니다.

Answer 1

기본적으로 파일은 html 파일과 동일한 폴더에 있어야합니다. 그래서 그 깃발 이미지가/img 또는 뭔가 src에 해당하는 것이 필요하다면. 인스펙터를 열고 열려고하는 파일 경로를 확인해 볼 수 있습니다.

Answer 2

이미지가 버튼 태그 안에 있고 단추의 innerHTML을 바꾸면 이미지 태그 자체가 완전히 제거된다고 생각합니다. 아래 코드를 사용해보십시오 :

<button id= "myButton" type="button" onclick= "change_PL();"><img src="flag_bulgaria.png" id="myImage" style="width:50px; height;50px;">Български</button> 

    <script> 
    function change_PL() { 
     var language = document.getElementById("myButton").innerHTML; 
     if (language.indexOf("Български") != -1) { 
      language = "English"; 
      document.getElementById("myButton").innerHTML = ""; 
      var img=document.createElement("img"); 
      img.src="flag_american.PNG"; 
      img.id="myImage"; 
      img.style["width"]="50px"; 
      img.style["height"]="50px"; 
      document.getElementById("myButton").appendChild(img); 
      document.getElementById("myButton").innerHTML = document.getElementById("myButton").innerHTML + language; 
     } 
     else { 
      document.getElementById("myButton").innerHTML = ""; 
      var img=document.createElement("img"); 
      img.src="flag_bulgaria.PNG"; 
      img.id="myImage"; 
      img.style["width"]="50px"; 
      img.style["height"]="50px"; 
      document.getElementById("myButton").appendChild(img); 
      document.getElementById("myButton").innerHTML = document.getElementById("myButton").innerHTML + "Български"; 
     } 
    } 
    </script> 

Answer 3

당신은 img 태그에 잘못된 css 코드를 작성했다. 이 교체 : 당신은 후 버튼의 innerHTML을 낭포에 IMG 기록됩니다

<img src="flag_bulgaria.png" id="myImage" style="width:50px; height:50px;"> 

Answer 4

제거 .innerHTML img 태그로 교체, 그래서 undefined src의 뜻은 .. 아래와 같은 몇 가지 요소를 추가 .Need있어

<button type="button" onclick= "change_PL();"> 
<img src="flag_bulgaria.png" id="myImage" style="width:50px; height;50px;"> 
<span id= "myButton">Български</span> 
</button> 

Answer 5

button.innerHTML에는 img 태그가 포함되어 있습니다. 교체를 위해 img를 복제 한 다음 제거하십시오. 그 후에 실제 언어을 버튼으로 가져옵니다. 마지막으로 버튼의 innerHTML을 대체하십시오. 아래를 참조하십시오.

function change_PL() { 
 
    var button = document.getElementById("myButton"); 
 
    var imageBlock = document.getElementById("myImage").cloneNode(true); 
 
    button.removeChild(document.getElementById("myImage")); 
 
    var language = button.innerHTML; 
 
    if (language=="Български") { 
 
     language = "English"; 
 
     imageBlock.src = "flag_american.PNG"; 
 
     document.getElementById("myButton").innerHTML = imageBlock.outerHTML + language; 
 
    } 
 
    else { 
 
     imageBlock.src = "flag_bulgaria.PNG"; 
 
     document.getElementById("myButton").innerHTML = imageBlock.outerHTML + "Български"; 
 
    } 
 
}

<button id= "myButton" type="button" onclick= "change_PL();"><img src="flag_bulgaria.png" id="myImage" style="width:50px; height;50px;">Български</button>