在移动设备上的容器中点击时随机位置显示字词

Question

我昨天问了这个问题，并被告知要问一个新的问题以获得精确的答案。

单击按钮时，我的代码会在页面上显示单词。

它工作得很好，是否可以将其包含在容器中？

因为我希望它只显示在移动设备上，当我减少浏览器页面时，会有一个巨大的滚动，并且所有单词都不会显示在窗口中。

只是为了尝试，我试图将其包含在 300x300 像素的框中，但文字无处不在。是否可以使用引导网格或任何媒体查询，或者像我对任何容器所做的那样？还是另一个JavaScript规则？

再次感谢 ！

var words = [
'Hello',
'No',
'Hi',
'Banana',
'Apple'
];
var visible = 0;
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
var fullWidth = window.innerWidth;
var fullHeight = window.innerHeight;
var elem = document.createElement("div");
elem.textContent = words[visible];
elem.style.position = "absolute";
elem.style.left = Math.round(Math.random() * fullWidth) + "px";
elem.style.top = Math.round(Math.random() * fullHeight) + "px";
document.body.appendChild(elem);
visible++;
});

<form>
<input type="submit">
</form>

Answer 1

我稍微改变了你的代码，这样应该可以工作。

var words = ['Hello','No','Hi','Banana','Apple'];
var visible = 0;
var container = document.getElementById("container");
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
var elem = document.createElement("div");

elem.className = "elem";
elem.textContent = words[visible];

document.body.appendChild(elem); // to get div sizes
var left = Math.round(Math.random() * containerWidth); 
var maxRight = containerWidth - (left + elem.offsetWidth + 5);

if (maxRight < 0) {
left -= Math.abs(maxRight);
}
var top = Math.round(Math.random() * containerHeight); 
var maxBottom = containerHeight - (top + elem.offsetHeight + 5);

if (maxBottom < 0) {
top -= Math.abs(maxBottom);
}
elem.style.left = left + "px";
elem.style.top = top + "px";

container.appendChild(elem);
visible++;

});

#container {
border: 1px solid black;
height: 500px;
width: 500px;
position: relative;
}
.elem {
display: inline-block;
position: absolute;
}

<form>
<input type="submit">
</form>
<div id="container"></div>