js/jquery对象显示只是一个快速的闪光

js / jquery object display just a quick flash

本文关键字：一个 对象 jquery 显示 js      更新时间：2023-09-26

我今天在处理js对象，遇到了一个奇怪的小故障。

<form method="get" action="" name="start" >
<fieldset>
<label for="date">Date</label>
<input type="date" name="date" id="date" />
<div>&nbsp;</div>
<label for="smiles">Starting Mileage</label>
<input type="number" name="smiles" id="smiles" />
<div>&nbsp;</div>
<label for="stime">Starting Time</label>
<input type="time" name="stime" id="stime" />
<div>&nbsp;</div>
<label for="submit">Click To Save</label>
<input type="submit"  name="submit" id="submit" />
</fieldset>
</form>
<div id="display" name="display" ></div>

`<script>src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">`
</script>
<script>
$(document).ready(function() {
$("#submit").click(function(){
var date =   document.getElementById("date").value;
 var smiles = document.getElementById("smiles").value;
 var stime =  document.getElementById("stime").value; 

 var record =  { date2: date, smiles2: smiles, stime2: stime };
document.getElementById("display").innerHTML = smiles;
 });
});
</script>

运行此操作时，record.smiles会在div id＝'display'中闪烁，但不会停留。为什么？这是在要求更多的细节，我不知道我能说多少细节，希望这能有足够的措辞来实现。

谢谢。

它会闪烁，然后消失，因为您正在单击提交按钮，而表单上按钮的默认操作是尝试提交表单。

为了防止默认操作，您只需要添加一行代码：

$(document).ready(function() {
$("#submit").click(function(){
     event.preventDefault(); // <----add this
     var date =   document.getElementById("date").value;
     var smiles = document.getElementById("smiles").value;
     var stime =  document.getElementById("stime").value; 

     var record =  { date2: date, smiles2: smiles, stime2: stime };
     document.getElementById("display").innerHTML = smiles;
 });
});

此外，你提到你正在"玩javascript对象"，所以我只想让你知道你在这里写的代码：

 var record =  { date2: date, smiles2: smiles, stime2: stime };

可以完全删除，并且完全不影响程序的行为。

也没有必要在密钥名称中添加"2"。如果您愿意，它们可以与您的变量相同。此外，从样式和可读性的角度来看，如果像这样的对象文字变得更复杂，那么它们的可读性会稍高一些。玩得高兴

var record =  { 
    date: date, 
    smiles: smiles, 
    stime: stime 
};

您必须阻止提交按钮的默认操作，否则它将同时提交表单，因此重新加载页面，尝试添加：

$("#submit").click(function(event) {
    event.preventDefault()
相关文章：