Javascript 如何使图像在单击时出现在随机位置

我对JavaScript非常陌生，我想做的就是当你点击一个按钮时，它会使一个图像出现在一个随机点上

我所尝试的：

 function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;


  document.body.appendChild("imglink"); 
}

但这并不是一个新元素

---

有人能告诉我正确的代码吗？

您在appendChild中有一个小错误，您应该附加创建的元素。除此之外，只需简单地设置顶部，然后选择一些随机的内容，就可以开始了

函数显示图像（src、宽度、高度、高度）{
var img=document.createElement（“img”）；
img.src=src；
img.width=宽度；
img.height=高度；
img.alt=alt；
//定位
img.style.position='绝对'；
img.style.top=document.body.clientHeight*Math.random（）+'px'；
img.style.left=document.body.clientWidth*Math.random（）+'px'；
文件.正文.附件（img）；
}
document.getElementById（'foo'）.addEventListener（'click'，（）=>
显示_图像（“http://placekitten.com/200/300“，200300，‘foo’）
);
html，
身体{
高度：100vh；
宽度：100vh；
}

养只猫
您已有的代码中存在问题。
appendChild
方法采用
HTMLElement
，而不是
字符串

但是，要在
单击
上执行函数，您必须将eventlistener添加到要单击的元素中。创建/添加EventListener的方法称为
addEventListener
。它将事件的名称作为字符串（在本例中为
'click'
）、执行的
函数和（可选）布尔值

.addEventListener（'click'，）

例如，要将
单击
事件侦听器添加到
元素，您可以编写：

document.body.addEventListener('click', function () { /* do something */ });

现在创建
：

与您已经做的一样，
createElement
函数通常用于创建
HTMLElement
实例。它接受要创建的元素的标记名，并返回一个新的
HTMLElement
。要向该元素添加属性，通常可以通过为属性指定值来完成。请记住，要删除属性，必须assing
null

这将创建一个新的
元素并为其指定属性

要将该图像添加到DOM中，可以使用
appendChild
。要将其放入
元素：

var myImg = document.createElement('img');
myImg.alt = 'A picture of Bill Murray';
myImg.src = 'https://www.fillmurray.com/400/300';
myImg.width = 400;
myImg.height = 300;

这会将
添加到
的子项末尾

尽管您现在知道如何将新元素放入DOM中，但它不会被随意放置。为此，您需要将
Math.random
和
innerWidth
/
innerHeight
组合在一起。或者，使用
getBoundingClientRect

让我们看看我们能用这个做些什么：

您还需要一些样式：

document.body.appendChild(myImg);

是否要从一组图像中显示？还是只显示一张？我想显示一张图像
function getRandomCoordsIn (element) {
  var rect = element.getBoundingClientRect();
  // rect has 4 numeric properties: top, left, width, height
  // we return a pair of values which always is inside the element passed
  return [
    rect.top + Math.random() * rect.height, // top
    rect.left + Math.random() * rect.width  // left
  ];
}

document.body.addEventListener('click', handleClick);

function handleClick () {
  var coords = getRandomCoordsIn(document.body);

  var myImg = document.createElement('img');
  myImg.alt = 'A picture of Bill Murray';
  myImg.src = 'https://www.fillmurray.com/400/300';
  myImg.width = 400;
  myImg.height = 300;

  // This assigns inline CSS styles
  myImg.style.top = coords[0] + 'px';
  myImg.style.left = coords[1] + 'px';

  document.body.appendChild(myImg);
}

function getRandomCoordsIn (element) {
  var rect = element.getBoundingClientRect();
  // rect has some numeric properties, we need: top, left, width, height
  // we return a pair of coordinates which is located inside
  // the element passed
  return [
    rect.top + Math.random() * rect.height, // top
    rect.left + Math.random() * rect.width  // left
  ];
}

html { height: 100vh; overflow: auto; }
body { min-height: 100%; }
img { position: absolute; display: block; }