HTML新手咨询：如何实现输入内容嵌入URL的交互功能？

你原代码里存在几个关键错误，导致动态加载图片的功能无法正常工作：

• 按钮的onclick属性语法错误，多了一个闭合双引号
• <img>标签里不能嵌套<div>元素，这种写法不符合HTML规范，也无法正确拼接图片URL
• 原函数只是修改div的文本内容，并没有关联到图片的src属性

下面是修正后的完整代码：

<body>
    <input id="testBox1" type="text" placeholder="输入内容生成图片">
    <button onclick="DisplayText()">生成图片</button>
    <p>
        <img id="dynamicImage" src="" alt="动态生成的图片">
    </p>

    <script>
        function DisplayText() {
            // 获取输入框的值
            const inputValue = document.getElementById("testBox1").value;
            // 拼接完整的图片URL
            const imageUrl = `http://verumignis.com/bitmapgen/${inputValue}`;
            // 设置给img元素的src属性
            document.getElementById("dynamicImage").src = imageUrl;
        }
    </script>
</body>

关键说明： #

1. 给<img>添加了id="dynamicImage"，方便JS快速定位元素
2. 修正了按钮onclick的语法错误，确保函数能正确触发
3. 使用模板字符串（` `包裹）拼接URL，把输入框的值直接嵌入到图片地址中
4. 函数逻辑改为直接修改img的src属性，这样输入内容后点击按钮就能加载对应图片

如果需要默认显示一张占位图，可以把img的src设置为默认图片地址，避免页面加载时出现裂图图标。

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