javascript 我怎样才能让它在我按下JS中的一个按钮时，一个图像出现？

6ojccjat 于 2023-03-16 发布在 Java

关注(0)|答案(2)|浏览(152)

我正在努力学习编程，我编写代码是为了练习和娱乐。我试着编写当我点击一个按钮时文本变成红色的代码。它工作了，但当我试着让它添加一个图像时，它不工作了。
我是这么试的

<button onclick="TurnRed()">Redify</button>

    <script>
        function TurnRed() {
            let x = document.getElementById("Lorem");
            x.style.color = "red";
            var img = document.createElement("img");
            img.src = /HTML_Code/Ispum.webp;
            var src = document.getElementById("header");
            src.appendChild(img);
            <div id="header"></div>
        }
    </script>

JavaScript

来源：https://stackoverflow.com/questions/75739821/how-do-i-make-it-so-when-i-press-a-button-in-js-an-image-appears

2条答案

按热度按时间

unhi4e5o1#

您可以执行以下操作：

创建img元素
添加src属性
将img元素附加到所需的html元素（此处为#header元素）
请参见下面的代码以获得解释（例如，这里我添加了一个Google徽标）：

function TurnRed() {
  let x = document.getElementById("Lorem");
  x.style.color = "red";
  var img = document.createElement("img");
  img.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
  var src = document.getElementById("header");
  src.appendChild(img);
}

<button id="Lorem" onclick="TurnRed()">Redify</button>
<div id="header">
</div>

**注意：**由于您使用的是webp，我建议您在此处检查浏览器兼容性：https://caniuse.com/webp

参考资料：*

img元素
appendChild方法
button元素

赞(0）回复(0）举报 2023-03-16

mkshixfv2#

img.src = "/HTML_Code/Ispum.webp";

img.src应该是一个字符串，字符串是图片的位置，你的问题中缺少位置的引号，添加试试

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 我怎样才能让它在我按下JS中的一个按钮时，一个图像出现？

2条答案

相关问题

热门标签

最新问答