Javascript 调用函数时元素不可见

我正在创建一个输入来捕获与捕获的鱼相关的数据。单击submit按钮时，我看到一个tr快速显示，然后消失，同样，我看到console.log消息在一瞬间显示，然后消失

代码发布在下面，但是运行代码片段与通过浏览器看到的代码片段不同。我在这里为此设置了一个实时站点：

我意识到这对你们大多数人来说很容易理解，所以不必告诉我我有多笨，因为我已经知道了

非常感谢您的帮助

函数displayFishData（）{
var table=document.getElementById（“test”）；//查找表中的“test”
var row=table.insertRow（）；//将行添加到该表中
row.insertCell（）；//将单元格插入表
log（“向表中添加一行”）；
}

表格{
边框：1px纯黑；
保证金：0自动；
宽度：80%；
}

鱼类记录
种类：
北梭子鱼
大口鲈鱼
小口鲈
链扒鱼
梭子鱼杂种
盘鱼
其他
重量（磅）：
长度（英寸）：
评论：


提交
种
重量（磅）
长度（英寸）
评论

这是因为您的按钮当前正在刷新页面

如果你加上

type=“按钮”

---

对于按钮，它将显示一个额外的tr并在控制台中显示消息这是因为您的按钮当前正在刷新页面

如果你加上

type=“按钮”

---

对于按钮，它将显示一个额外的tr并在控制台中显示消息

按钮元素的

类型

属性的默认值为

提交

。因此，点击按钮，它将提交表单

替换

<button onclick="displayFishData()">Submit</button>

提交

到

提交

按钮元素的

类型

属性的默认值是

提交

。因此，点击按钮，它将提交表单

替换

<button onclick="displayFishData()">Submit</button>

提交

到

提交

首先将

displayFishData（）

添加到表单，而不是按钮！这看起来像是

，这将帮助您更好地控制表单输出

顺便说一句，使用

比

为简化数据插入，请执行以下操作：

var table = document.getElementById("test");
var row = table.insertRow();
var e1 = row.insertCell(0);
var e2 = row.insertCell(1);
// keep adding as much rows as you got
// this change the innerHTML
e1.innerHTML = "the data you got from a form element";
// repeat that

---

首先，将

displayFishData（）

添加到表单中，而不是按钮！这看起来像是

，这将帮助您更好地控制表单输出

顺便说一句，使用

比

为简化数据插入，请执行以下操作：

var table = document.getElementById("test");
var row = table.insertRow();
var e1 = row.insertCell(0);
var e2 = row.insertCell(1);
// keep adding as much rows as you got
// this change the innerHTML
e1.innerHTML = "the data you got from a form element";
// repeat that

---

注意：

没有结束标记。

提交

-默认情况下，

按钮

s在表单内时将充当提交按钮，导致表单刷新阅读感谢Polywhill先生，Arun P Johny，和Mosh Feu。注意：

没有结束标记。

提交

-默认情况下，

按钮

s在表单内时将充当提交按钮，导致表单刷新阅读感谢Polywhill先生、Arun P Johny和Mosh Feu。这会起作用，但您不应该解释为什么它会起作用吗？这会起作用，但是，您不应该解释为什么它会工作吗？像您描述的那样调用函数会在页面刷新时出现同样的问题，因此tr添加的内容会很快被删除。要在不刷新页面的情况下使用它，是否需要向button元素添加任何内容？还是我遗漏了什么？我更新了答案，尝试使用输入标记@john_h调用您描述的函数会在页面刷新时出现同样的问题，因此tr添加会很快被删除。要在不刷新页面的情况下使用它，是否需要向button元素添加任何内容？还是我遗漏了什么？我更新了答案，尝试使用输入标记@john_h