点击按钮将随机图片加载至div内失败，寻求技术解决方法

你的核心问题是把class选择器和id选择器搞混了——目标div用的是class="placehere"，但你尝试用getElementById("placehere")获取它，这必然找不到元素，导致图片无法插入到目标容器内。此外代码还有几处小问题需要修正，以下是完整解决方案：

修正后的JavaScript代码 #

function display_random_image() {
    var theImages = [
        { src: "tarot/1.png" },
        { src: "tarot/2.png" }
    ];
    
    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
    }
   
    // 修复变量声明，避免全局污染
    function getRandomInt(min, max) {
        var imn = Math.floor(Math.random() * (max - min + 1)) + min;
        return preBuffer[imn];
    }  

    var newImage = getRandomInt(0, preBuffer.length - 1);
 
    // 只清除目标容器内的图片，而非页面所有img
    var targetDiv = document.querySelector(".placehere");
    while (targetDiv.firstChild) {
        targetDiv.removeChild(targetDiv.firstChild);
    }
    
    // 将图片插入目标div内
    targetDiv.appendChild(newImage);
}

对应的HTML主体（无需修改） #

<body>
    <div class="placehere"></div>
    <button id="jsstyle" onclick="display_random_image();">Show Image</button>
</body>

关键修改说明 #

• 容器选择修正：用document.querySelector(".placehere")获取class为placehere的div，替代错误的getElementById（你的div未设置id属性）。
• 清理逻辑优化：只清除目标div内的子元素，避免误删页面其他位置的图片，循环移除子节点的方式更简洁可靠。
• 变量声明修复：在getRandomInt函数内给imn添加var声明，避免生成全局变量引发潜在问题。

修改后点击按钮，随机图片会正确插入到指定div内部。

内容的提问来源于stack exchange，提问作者Klip