javascript - js/jquery 对象快速显示

Question

我今天在弄乱 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' 中闪烁但不会保留。为什么？这是在询问更多细节，我不知道我能说得更详细多少，希望这足以使它成为现实。

谢谢。

Answer 1

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

要阻止默认操作，您只需添加一行代码:

$(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 
};