Javascript innerHTML 不适用于图像，但适用于文本？

Posted 2023-05-07

【中文标题】Javascript innerHTML 不适用于图像，但适用于文本？

【英文标题】：Javascripts innerHTML not working for images, but works with text?

【发布时间】：2012-07-01 05:45:38

【问题描述】：

好的，我有一个javascript函数，当用户更改选择下拉框的选项时，它会切换div标签的innerhtml..

文本一切正常，但图像标签停止工作？

工作示例...

function toggle(opt) 
        var d = document.getElementById('div_tag');
        if (opt == '5') 
                d.innerHTML = 'FIVE';
        
        else if (opt == '4') 
                d.innerHTML = 'FOUR';
        
        etc...

不工作的例子...

function toggle(opt) 
        var d = document.getElementById('div_tag');
        if (opt == '5') 
                d.innerHTML = '<img src='path/img1.jpg'><img src='path/img2.jpg'>';
        
        else if (opt == '4') 
                d.innerHTML = '<img src='path/img2.jpg'><img src='path/img1.jpg'>';
        
        etc...

这是我的 select 和 div 标签上的内容。

<select onchange='toggle(this.value);'>
<div id='div_tag'></div>

任何人都告诉我我在这里做错了什么，因为我被难住了.. 当所有不同的是一个是另一个是文本时，为什么一个工作而不是另一个工作？？

谢谢。

【问题讨论】：

你需要同时使用"和'。当你去指定src时，你看不到字符串正在被分解吗？它应该抛出各种错误，您是否检查了控制台或错误日志？应该是：'<img src="path/img2.jpg"><img src="path/img1.jpg">'

【参考方案1】：

在我看来，您似乎忘记转义图像路径周围的引号，并且它没有正确读取您的字符串，试试这个

function toggle(opt) 
    var d = document.getElementById('div_tag');
    if (opt == '5') 
            d.innerHTML = '<img src=\'path/img1.jpg\'><img src=\'path/img2.jpg\'>';
    
etc...

【讨论】：

当然.. d'uh haha​​。感谢您指出这一点，写了这么多不需要转义的东西，我忘记了这些。

你应该关闭你的标签:-)

【参考方案2】：

进行这些更改，将开头和结尾的' 替换为"。

function toggle(opt) 
        var d = document.getElementById('div_tag');
        if (opt == '5') 
                d.innerHTML = "<img src='path/img1.jpg'><img src='path/img2.jpg'>";
        
        else if (opt == '4') 
                d.innerHTML = "<img src='path/img2.jpg'><img src='path/img1.jpg'>";
        
        etc...

您实际上使用的是单引号而不是双引号。 path/img1.jpg、path/img2.jpg 之前没有被视为字符串的一部分。这就是问题所在。

更新 对于你的 php 问题，请这样做：

function toggle(opt) 
        var d = document.getElementById('div_tag');
        if (opt == '5') 
                d.innerHTML = '<img src='+'path/img1.jpg'+'><img src='+'path/img2.jpg'+'>';
        
        else if (opt == '4') 
                d.innerHTML = '<img src='+'path/img2.jpg'+'><img src='+'path/img1.jpg'+'>';
        
        etc...

【讨论】：

不，问题不在于您所说的“使用单引号而不是双引号”。问题在于两者都使用相同的符号而不是转义它们。您也可以在 '<img src="path/img2.jpg"><img src="path/img1.jpg">' 周围交换它们，因为 javascript 将两者都用于字符串。

为什么人们在不了解答案的情况下就这么急着投反对票。介意解释否决票吗？

请正确发声。在编程语义的世界中，一切。您所说的是错误，因为它会导致 OP 错误地理解他们做错了什么。当你给出答案时，请彻底解释。

我认为投票者说得对，只有你有问题。任何方式，都无所谓。

想让你的答案尽可能完整有那么难吗？这不是关于一两个人现在收集正确的想法，而是关于潜在地帮助后来的任何人。您的回答不完整且具有误导性，因此我将相应投票。