javascript - 如何使图像出现在随机位置onclick

Question

我是 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"); 
}

但这甚至没有产生新元素。

谁能告诉我正确的代码？

Answer 1

您在 appendChild 中有一点错误，您应该附加创建的元素。除此之外，只需设置顶部并随机选择一些东西，您就可以开始了

function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;
  
  // set the position
  img.style.position = 'absolute';
  img.style.top = document.body.clientHeight * Math.random() + 'px';
  img.style.left = document.body.clientWidth * Math.random() + 'px';

  document.body.appendChild(img);
}
document.getElementById('foo').addEventListener('click', () =>
  show_image("http://placekitten.com/200/300", 200, 300, 'foo')
);

html,
body {
  height: 100vh;
  width: 100vh;
}

<button id="foo">
  Get a cat
</button>