JavaScript 无法将图像插入 HTML

Question

我正在为一个程序制作原型(prototype)，该程序允许您插入图像 URL，并且可以使用动画 GIF 添加到其中(不使用 Canvas，因为动画 GIF 无法显示)。但是，当我尝试这样做时，它不起作用。

<center>
<input type="text" id="tb" placeholder="Image URL" />
    <button onClick="ipt()">Import</button>
    <button onClick="edit()">Add Effects</button>
    <div id="lyr">

    </div>

</center>

<script>
    function ipt() {
    var c = document.getElementById('tb').value;
    alert(c);
    document.getElementById('lyr').style.background = "url(" + c + ")";
    }
</script>

Answer 1

这是一个简单的原始脚本，可以执行您想要的操作。

它首先为您要处理的每个项目创建变量，然后为按钮创建点击处理程序。

请随意将类选择器换成 ID。

https://jsfiddle.net/chxd6bnb/2/

var holder = document.getElementsByClassName('holder');
var image = document.getElementsByClassName('image');
var button = document.getElementsByClassName('showIt');
console.log(button);

button[0].addEventListener('click', function(e) {
    e.preventDefault();
    var img = image[0].value;

    holder[0].style.backgroundImage = 'url(' + img + ')';
});