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 =＆＃39; display＆＃39;中闪烁。但不会留下来。为什么？这是在询问更多细节，我不知道我能走多远的细节，希望这将足以让它成为现实。

感谢。

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

Answer 2

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

$("#submit").click(function(event) {

    event.preventDefault()

js / jquery对象只显示一个快速闪烁

2 个答案: