新手求助：实现div内图片加载随机定位、点击随机移动的问题

你的代码存在几个关键问题，导致图片一直停在左上角，以下是问题分析和修正方案：

问题点梳理 #

• 函数调用未触发：onload="fpos"和onclick="rmove"没有加括号，浏览器不会执行这些函数，必须写成fpos()和rmove()才会触发
• 变量作用域失效：img、x、y是fpos函数内的局部变量，rmove函数根本访问不到这些变量
• 操作对象错误：你需要移动的是包含图片的div，而非图片本身，应该获取div的DOM元素来修改位置
• HTML样式语法错误：div的style属性值没加引号，正确写法是style="position:absolute;"
• 初始位置未设置：fpos函数只定义了随机数变量，没有把这些值应用到元素的位置上

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <script>
        // 获取包含图片的div元素，全局作用域方便函数访问
        let moveDiv;

        // 生成随机位置并应用到div
        function setRandomPos() {
            // 计算随机位置，减去div自身宽高避免移出页面
            const x = Math.floor(Math.random() * (window.innerWidth - moveDiv.offsetWidth));
            const y = Math.floor(Math.random() * (window.innerHeight - moveDiv.offsetHeight));
            // 给div设置位置
            moveDiv.style.top = y + 'px';
            moveDiv.style.left = x + 'px';
        }

        // 页面加载完成后初始化元素和位置
        window.onload = function() {
            moveDiv = document.getElementById('moveDiv');
            setRandomPos();
        };
    </script>
</head>
<body>
    <!-- 给div加id，修复style引号问题，绑定点击事件 -->
    <div id="moveDiv" style="position:absolute;" onclick="setRandomPos()">
        <img id="myImage" src='images/iasip.jpeg'>
    </div>
</body>
</html>

关键修改说明 #

1. 统一函数逻辑：把原本的两个函数合并成setRandomPos，确保每次调用都生成新随机位置并直接应用到div上
2. 适配页面边界：计算随机位置时减去div自身的宽高，避免div移动到页面可视区域外
3. 规范元素获取时机：在window.onload里获取div元素，确保DOM加载完成后再操作，避免元素未找到的错误
4. 修复事件绑定：onclick直接调用合并后的函数，用window.onload替代body的onload属性，写法更严谨
5. 修正HTML语法：给div的style属性补上引号，新增id方便获取目标元素

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