JS&HTML表单故障：提交无输出、页面刷新+validate未定义报错

数据老陈

2026-5-8

解决你的Akan名称生成器问题

嘿，我看到你在开发Akan名称生成器时遇到了两个核心问题，还有代码里藏着一些小bug，我一步步帮你梳理解决：

问题1：Uncaught ReferenceError: validate is not defined

你的表单标签里写了onsubmit="validate();"，但你的JavaScript代码里根本没定义过validate函数，浏览器找不到这个函数自然就报错了。我们直接移除这个多余的onsubmit属性就行，或者替换成我们的处理函数（后面会说）。

问题2：表单提交后页面自动刷新

表单默认的submit行为会触发页面刷新，这会打断我们的JS逻辑执行。解决办法很简单：在处理函数里阻止表单的默认提交行为。

除此之外，代码里还有几个关键bug需要修正，否则逻辑也跑不通：

1. 变量作用域与语法错误

getGender函数里重复声明了var gender，导致全局的gender变量无法被正确赋值，要去掉函数里的var；而且else的语法写错了，应该是else而不是else (condition)：

function getGender(){
 var genderElements = document.getElementsByName("gender");
 if(genderElements[0].checked){ 
   gender = "male";
 } else {
   gender = "female";
 }
}

你把switch判断写在了全局作用域，这时候dayValue和gender还没被赋值，这个判断永远不会执行。必须把这部分逻辑移到findName函数里面。
最后一个female的case里innerHTMl拼写错误，应该是innerHTML。

2. 日期计算逻辑错误

原公式要求所有除法都是整数除法，你直接用/会得到小数，导致计算结果偏差。正确的计算逻辑应该用Math.floor()取整，还要处理负数的情况：

function getDayValue (){
 inputFromUser();
 let d = (
   Math.floor(century/4) - 2*century -1 +
   Math.floor(5*year/4) +
   Math.floor(26*(month+1)/10) +
   day
 ) %7;
 // 处理负数结果，确保返回值在0-6范围内（对应周日到周六）
 d = d < 0 ? d +7 : d;
 return Math.floor(d);
}

3. 优化名称数组

你的名称数组格式有点乱，改成纯名称数组更方便匹配：

var maleNames=["Kwasi","Kwadwo", "Kwabena","Kwaku","Yaw","Kofi","Kwame"];
var femaleNames=["Akosua","Adwoa","Abenaa","Akua","Yaa","Afua","Amma"];

修正后的完整代码

JavaScript部分

var century, year, month, day, dayValue, gender;//Get input from user
var maleNames=["Kwasi","Kwadwo", "Kwabena","Kwaku","Yaw","Kofi","Kwame"];
var femaleNames=["Akosua","Adwoa","Abenaa","Akua","Yaa","Afua","Amma"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday", "Thursday", "Friday","Saturday" ];

function inputFromUser() {
 century= parseInt(document.getElementById("CenturyDigits").value);
 year= parseInt(document.getElementById("YearDigits").value);
 month= parseInt(document.getElementById("Month").value);
 day = parseInt(document.getElementById("Day").value);
}

function getDayValue (){
 inputFromUser();
 let d = (
   Math.floor(century/4) - 2*century -1 +
   Math.floor(5*year/4) +
   Math.floor(26*(month+1)/10) +
   day
 ) %7;
 // 处理负数结果，确保返回值在0-6范围内
 d = d < 0 ? d +7 : d;
 return Math.floor(d);
}

function getGender(){
 var genderElements = document.getElementsByName("gender");
 if(genderElements[0].checked){ 
   gender = "male";
 } else {
   gender = "female";
 }
}

function findName(event){
 // 阻止表单默认提交行为，防止页面刷新
 event.preventDefault();
 dayValue= getDayValue();
 getGender();
 let resultElement = document.getElementById("Results");
 // 根据计算结果匹配对应的星期和名称
 switch(gender){
   case "male":
     resultElement.innerHTML = `You were born on ${dayNames[dayValue]} and Your akan name is ${maleNames[dayValue]}`;
     break;
   case "female":
     resultElement.innerHTML = `You were born on ${dayNames[dayValue]} and Your akan name is ${femaleNames[dayValue]}`;
     break;
   default:
     resultElement.innerHTML = "Please select a gender";
 }
}

// 重置结果显示
function reset(){
 document.getElementById("Results").innerHTML = "";
}

HTML表单部分（只修改关键部分）

<form name="AganNames" class="form" action="#" method="get" id="form-user">
 <!-- 其他表单元素保持不变 -->
 <button id="button-submit" type="submit" class="button button-primary mb-2" onclick="findName(event)">Get Akan Name</button>
 <button id="button-reset" type="reset" class="button button-primary mb-2" onclick="reset()">Reset</button>
 <p id="Results"></p>
</form>

另外，你的HTML里还有个拼写错误：<linl href="css/bootstrap.css"应该是<link，记得修正，避免样式加载异常。

现在这些修改应该能解决你的两个核心问题，同时让Akan名称生成逻辑正常运行啦！

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