如何用JavaScript实现点击按钮显示图片？问题代码求助

你提供的代码里，添加图片失败主要有3个问题：

• 图片路径未加引号：JavaScript里字符串必须用引号包裹，你写的/HTML_Code/Ispum.webp是无效语法，会直接报错。
• HTML标签写进了JS函数：<div id="header"></div>放在TurnRed函数里完全错误，这个容器得提前写在页面的HTML结构里，不能在JS执行时这么插入。
• 潜在的元素存在性风险：虽然你说文本变红功能正常，但要确保页面上确实存在id="Lorem"的元素，不然控制台会报错影响后续代码执行。

原问题代码 #

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

修复后的代码 #

<!-- 提前在HTML结构中放置需要的元素容器 -->
<div id="Lorem">这是要变红的目标文本</div>
<div id="header"></div>
<button onclick="TurnRed()">Redify</button>

<script>
    function TurnRed() {
        // 处理文本变红逻辑
        let textElement = document.getElementById("Lorem");
        if (textElement) { // 增加判断避免元素不存在时报错
            textElement.style.color = "red";
        }
        
        // 处理添加图片逻辑
        var img = document.createElement("img");
        img.src = "HTML_Code/Ispum.webp"; // 路径添加引号，根据实际文件位置调整
        img.alt = "示例图片"; // 添加alt属性提升可访问性
        var headerContainer = document.getElementById("header");
        if (headerContainer) { // 增加判断避免容器不存在时报错
            headerContainer.appendChild(img);
        }
    }
</script>

关键修改说明 #

1. 将<div id="header"></div>移到script标签外的HTML结构中，确保JS执行时能找到目标容器。
2. 给图片路径添加双引号，修正字符串语法错误。
3. 增加元素存在性判断，避免因元素缺失导致的控制台报错，提升代码健壮性。
4. 给图片添加alt属性，符合网页可访问性规范。

内容的提问来源于stack exchange，提问作者Josh Y