HTML表单关联JavaScript时点击按钮页面立即刷新问题求助

问题根源分析 #

你的代码存在三个核心问题，导致页面刷新和控制台错误一闪而过：

1. 表单内的<button>默认是submit类型，点击会触发表单默认提交行为，直接刷新页面
2. JavaScript中调用getElementById时缺少document.前缀，会触发未定义错误
3. 使用body.innerHTML(...)是错误语法，innerHTML是属性而非方法，需用赋值操作

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veux tu parier tout ton argent</title>
    <script src="script.js" defer></script>
</head>

<body>
    <header>
        <h1>La chance souris aux audacieux</h1>
        <p> Tu ne gagnes rien si tu restes sur le côté</p>
    </header>
    <main>
        <h2>Tu peux d'abord commencer par remplir les informations</h2>
        <form id='formulaire'>
            <label for="lenom">Entrer votre nom</label>
            <input id='lenom' type="text" name='lenom'>
            <button id='presse'>envoyer</button>
        </form>
        <!-- 新增结果容器，避免覆盖页面原有内容 -->
        <div id="result-container"></div>
    </main>
</body>
</html>

JavaScript代码

// 生成1-6的随机数
function donneAlea(){
    let nombre = Math.floor(Math.random()*6+1)
    return nombre
}
// 资金管理逻辑
function management(somme,pari,victoire){
    return victoire ? somme + pari : somme - pari
}
// 按钮点击事件处理
let pression = document.getElementById('presse');
pression.onclick = function(event){
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    
    // 修正：添加document.前缀调用getElementById
    let baliseNom = document.getElementById('lenom');
    let nom = baliseNom.value.trim();
    
    // 使用专门容器显示结果，保留页面原有结构
    let resultContainer = document.getElementById('result-container');
    if(nom){
        resultContainer.innerHTML = `<p>Bonjour ${nom} !</p>`;
    } else {
        resultContainer.innerHTML = `<p>Veuillez entrer votre nom.</p>`;
    }
}
console.log("test")

关键修改说明 #

• 阻止页面刷新：通过event.preventDefault()取消表单默认提交行为，控制台错误不再一闪而过
• 修正DOM方法调用：必须通过document.getElementById访问DOM元素，避免未定义错误
• 优化内容展示：新增专用容器显示结果，避免直接替换body.innerHTML导致页面原有内容丢失
• 变量声明规范：在donneAlea函数中用let声明变量，避免全局变量污染
• 用户体验优化：添加输入内容校验，提示用户未输入姓名的情况

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