Question

我正在为一个允许你插入图像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 + ')';
});

JavaScript无法将图像插入HTML

1 个答案: