Question

我是JavaScript的新手，正在为一个类做一个项目。我想在页面的某个位置创建一个复活节彩蛋，点击后将整个页面代码更改为单个图像。这是我的代码，只是为了测试这个概念：

<div id = "all">
    <p>The button below changes the whole page.</p>

    <button type = "button" onclick = "changePage()">Click Here</button>
</div>

<script>
    function changePage()
    {
        document.getElementById("all").innerHTML = "<img src = "stop.jpg" />";
    }
</script>

内容不会被图像stop.jpg取代，但是当我将该行更改为：

document.getElementById("all").innerHTML = "<h1>Whatever</h1>";

代码更改为简单标题，没有任何问题。知道为什么吗？

Answer 1

你没注意到报价重复吗？你应该用另一个引号包装你的img：

'<img src = "stop.jpg" />'

或逃避他们

"<img src = \"stop.jpg\" />"

Answer 2

问题出在你的报价上。 stop.jpg网址周围的双引号结束以<img开头的字符串。您需要使用单引号或转义引号：

document.getElementById("all").innerHTML = "<img src = 'stop.jpg' />";

document.getElementById("all").innerHTML = "<img src = \"stop.jpg\" />";

您是否在Javascript控制台中收到语法错误？或者注意SO语法高亮显示中改变的颜色？

使用JavaScript innerHTML来替换图像时出现问题

2 个答案: