Javascript 全局变量未从函数中更新

我正在创建一个简单的表单，用户可以在其中设置小时。 通过javascript验证，它检查表单中是否有值。 最初，全局变量“userInputHours”设置为0

在函数“validation（）”中，当用户在表单中填写所需的条件时，验证将转到“else”，并应更新全局变量“userInputHours”

作为最后一步，HTML信息框应更新用户输入小时数

问题出在哪里？我无法将用户表单输入值保留在HTML信息框中（它在不到一秒钟的时间内可见，然后被原始值“userInputHours”覆盖）

我知道一些答案表明我应该使用AJAX，但这是为了解决只有部分页面被重新加载的问题。使用AJAX并不能解决问题的根本

场景和哪些有效/哪些无效：

---

场景1:在表单字段“小时”中输入数字，然后按按钮“提交-1”：

---

工作：控制台日志打印“您添加的：[您以HTML格式添加的数字]

不起作用：从控制台本身运行console.log（userInputHours）会返回最初的值[0]，而不是用户添加的值。注意！在很短的时间内，不到一秒钟的时间内，您实际上在HTML表单中看到了用户值，但会被原始值覆盖

想要的结果：在HTML信息框中，应显示用户添加的编号

---

场景2:按submit-2调用函数“outsideValidation（）”， 将“userInputHours”设置为5：

---

工作：全局变量“userInputHours”正在从函数内部更新。console.log（userInputHours）确认该全局变量已更新。HTML信息框正在使用更新全局变量的值进行更新

不起作用：由于此测试未连接到用户表单字段“小时”，因此在字段“小时”中添加一个数字并在HTML信息框中更新它是不起作用的

预期结果：按预期工作。无法解决所需的完整解决方案

//全局变量。
var userInputHours=0；
//验证。
函数验证（）{
userInputHours=document.getElementById（“userInputHours”）.value；//有效
/*验证空白字段*/
如果（userInputHours==“”）{
console.log（“字段留空”）；//有效
警告（“请填写所有字段！”）//有效
返回false；
}
否则{
log（“您添加了：”+userInputHours）；//有效
//您会在很短的时间内看到附加值。它会返回到原始glbal值。
document.getElementById（“信息框文本”）.innerHTML=userInputHours；//不起作用。
返回true；
}
}
/*不是验证的一部分。已连接到按钮“提交-2”*/
函数外部验证（）{
userInputHours=5；
document.getElementById（“信息框文本”）.innerHTML=userInputHours；//可以工作，但与HTML表单用户输入断开连接。
}
/*不是函数的一部分。仅在保存脚本时运行*/
document.getElementById（“信息框文本”）.innerHTML=userInputHours；//通过保存脚本工作。

.box-1{
背景色：白色；
宽度：100px；
高度：100px；
}
#用户权限{
宽度：100px；
}
#提交-1，
#提交-2{
高度：60px；
}

小时数：












信息框-（您已将小时设置为）：

浏览器使用

验证的返回值来确定是否应执行表单提交的默认行为

如果返回值为
true
，则会发生默认行为，浏览器会将表单提交到
action
属性中定义的URL（如果
action
属性没有值，则默认为当前URL）

使用表单提交，您将离开当前页面并加载一个新页面或根据
action
的值重新加载当前页面。因此，js存储的所有值都将丢失

如果您不想将数据发送到服务器，则必须在这两种情况下写入
return false
，以防止表单提交。
“您会在很短的时间内看到附加值。它会返回到原始glbal值。”-大约有11/10的情况下，这意味着浏览器以正常方式提交表单，因此页面只是“重新加载”。由于在本例中，您是从验证函数内部返回
true
，因此在本例中，这也是意料之中的。在
document.getElementById（“信息框文本”）之后的
返回true
.innerHTML=userInputHours；//不起作用。
告诉浏览器，允许它提交表单，因此它将设置
innerHTML
，在浏览器能够提交数据之前，它将短暂可见。因为没有指定
action
属性，所以提交的目标url是当前url，并且页面已重新加载。因此，在这种情况下，您是否要将数据提交到服务器？在这个特定测试中，我不需要将数据提交到服务器。代码是javascript数字时钟警报的一部分。基本上，用户应该能够添加“HH MM ss”以及将其发送到HTML“信息框”的原因“是确认用户何时设置报警。然后将
返回真值
更改为
返回假值
，所有操作都应按预期进行。如果要将数据发送到服务器并保留信息，则需要使用ajax发送数据，同时保持在页面上。或者服务器已经提交了您所需的所有信息，并回复了提交表单。@t.niese：您的建议