如何使用 javascript 用多个图像替换 HTML 按钮？答案

【问题标题】：How do I replace an HTML button with several images using javascript?如何使用 javascript 用多个图像替换 HTML 按钮？
【发布时间】：2012-11-19 18:42:29
【问题描述】：

我目前有：

//javascript
function morshots()
{
    var mordor = document.getElementById("ss1");
    var shots= (
    mordor.innerHTML = <img src="http://i.imgur.com/83HCt.png" alt="scrns1"><img src="http://i.imgur.com/5mWIy.png" alt="scrns2"><img src="http://i.imgur.com/pPafl.png" alt="scrns3">;
}

和

<!--html-->
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="screenshots.js"></script>
    </head>
    <body>
        <div id="ss1">
            <button onClick="morshots();">View Screenshots</button>
        </div>
    </body>
</html>

目前，该按钮在单击时不执行任何操作。我想要的是图像替换页面上的按钮。这不是我的全部代码，但是为了便于阅读，我省略了不相关的一段代码。

--编辑--

我为图像标签周围的内部引号和非转义引号添加了转义。我仍然得到与页面相同的结果（单击按钮没有任何作用）

function morshots()
{
var mordor = document.getElementById("ss1");
mordor.innerHTML = '<img src=\"http://i.imgur.com/83HCt.png\" alt=\"scrns1\"><img src=\"http://i.imgur.com/5mWIy.png\" alt=\"scrns2\"><img src=\"http://i.imgur.com/pPafl.png\" alt=\"scrns3\">';
}'

---EDIT2:----

修复它，工作代码如下：

function morshots()
{var mordor = document.getElementById("ss1");
mordor.innerHTML = '<img src=\"http://i.imgur.com/83HCt.png\" alt=\"scrns1\"><img src=\"http://i.imgur.com/5mWIy.png\" alt=\"scrns2\"><img src=\"http://i.imgur.com/pPafl.png\" alt=\"scrns3\">';
}

【问题讨论】：

img 标签周围缺少引号
那个 JS 是怎么工作的？您在作业中缺少引号。

标签： javascript dom button

【解决方案1】：

在引号内添加<img>s：

function morshots()
{
    var mordor = document.getElementById("ss1");
    mordor.innerHTML = '<img src="http://i.imgur.com/83HCt.png" alt="scrns1"><img src="http://i.imgur.com/5mWIy.png" alt="scrns2"><img src="http://i.imgur.com/pPafl.png" alt="scrns3">';
}

【讨论】：

【解决方案2】：

您检查 JavaScript 控制台是否有错误？

// syntax error:
var shots= (

// syntax error:
mordor.innerHTML = <img src="http://i.imgur.com/83HCt.png" alt="scrns1"><img src="http://i.imgur.com/5mWIy.png" alt="scrns2"><img src="http://i.imgur.com/pPafl.png" alt="scrns3">;

您需要将字符串传递给mordor.innerHTML - 将您的 html 用引号括起来。我不确定你想用 shots 做什么。

【讨论】：

【解决方案3】：

添加引号并使用 html 在它们之前添加反斜杠 \ 对其进行转义：

var mordor = document.getElementById("ss1");
mordor.onclick = function () {
  var shots= "<img src=\"http://i.imgur.com/83HCt.png\" alt=\"scrns1\"><img src=\"http://i.imgur.com/5mWIy.png\" alt=\"scrns2\"><img src=\"http://i.imgur.com/pPafl.png\" alt=\"scrns3\">";
  mordor.innerHTML = shots;
};

【讨论】：