JavaScript onClick函数中的While循环无响应问题求助

你的代码存在三个核心问题，导致预期效果没实现：

• 变量声明顺序错误：先执行element.innerText = clickMe时，clickMe还没声明，此时clickMe处于暂时性死区，会触发ReferenceError，直接中断后续代码执行
• 同步无限循环阻塞主线程：while(true)是同步死循环，会彻底卡住浏览器的渲染和JS执行线程，页面根本没有机会更新DOM
• 复用同一DOM元素：就算循环能执行，重复append同一个元素只会把它在DOM里移动位置，不会新增节点

修复后的代码 #

<body>  
    <button onclick="yesClick()">Click me for a suprise word!</button>
    <script>
        function yesClick() {
            alert("Are you sure?")
            alert("Check again... but first click ok")

            // 先声明变量再使用
            let clickMe = "Gigachad"
            
            // 用异步循环替代同步死循环，避免阻塞主线程
            setInterval(() => {
                // 每次循环创建新的div元素
                let element = document.createElement("div");
                element.innerText = clickMe;
                document.body.appendChild(element)
            }, 100); // 每100毫秒添加一个，可自行调整间隔
        }
    </script>
</body> 

修复说明 #

1. 调整clickMe的声明位置，确保赋值给element.innerText时变量已存在
2. 使用setInterval创建异步循环，让浏览器有时间处理DOM渲染和用户交互
3. 把element的创建放到循环内部，每次生成新的DOM节点，实现持续添加的效果

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