Question

Noob在这里：我的按钮有一个文本和一个图像，我想改变两个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";
    }
}

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

您在css标记中写了错误的img代码。替换为：

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

Answer 4

你将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>

Answer 5

button.innerHTML 包含 img 标记。克隆img进行更换，然后将其删除。之后，在按钮中获取实际的语言。最后，替换按钮的innerHTML。见如下。

＆＃13;

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 + "Български"; 
    }
}

＆＃13;

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

＆＃13;

按钮图像不会改变

5 个答案: