按鈕圖像不會改變

Noob here：我的按鈕有一個文本和一個圖像，我想改變兩個onclick。文本更改，但對於圖像我get..crt null（看起來像無法找到圖像文件 - 它們都與HTML代碼）初始圖像在那裏，但當我點擊它消失。按鈕圖像不會改變

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


function change_PL() { 
    var language = document.getElementById("myButton").innerHTML; 

    if (language=="Български") { 
     language = "English"; 
     document.getElementById("myButton").innerHTML = language; 
     document.getElementById("myImage").src = "flag_american.PNG"; 
    } 
    else { 
     document.getElementById("myButton").innerHTML ="Български"; 
     document.getElementById("myImage").src = "flag_bulgaria.PNG"; 
    } 
}

來源

2016-07-07 Milena Eneva

如果你換初始圖像flag_american.png發生 - 它仍然在那裏開始？如果沒有，那麼你的文件名就有一個錯字。 – DAXaholic

默認情況下，文件需要與html文件位於同一文件夾中。因此，如果這些標誌圖像在/ img或某些東西你需要你的src來對應。您可以嘗試打開檢查器並檢查它試圖打開的文件路徑。

來源

2016-07-07 04:28:08 Ted

我認爲該圖像是本按鈕標籤和更換按鈕的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>

來源

2016-07-07 04:36:12

您已經img標籤寫錯css代碼。這種替換：

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

來源

2016-07-07 04:43:03

你之後，你寫IMG到按鈕的innerHTML。所以與.innerHTML img標籤替換將刪除，所以undefined src意志得到。需要添加一些元素像下面..

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

來源

2016-07-07 04:47:28

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>

來源

2016-07-07 04:48:37 Anson

按鈕圖像不會改變

回答

相關問題