DOM javascript 表单元素访问答案

【问题标题】：DOM javascript Form elements accessingDOM javascript 表单元素访问
【发布时间】：2021-05-21 06:52:18
【问题描述】：

我已经开始 javascript DOM 操作，我可能遇到了一个错误。每当我在 jaykumar 之类的名称字段中输入并按 click me 按钮时。在 demo 中，jaykumar 会随之而来几微秒过去了。

function myfunction() {
  var x = document.getElementById("myform").elements["fname"].value;
  document.getElementById("demo").innerHTML = x;
}

<form id="myform">
  name<input type="textbox" name="fname"> email
  <input type="textbox" name="email">
  <button onclick="myfunction()"> Click me</button>

</form>
<div id="demo"></div>

【问题讨论】：

那是因为button 默认创建了一个提交按钮，所以表单提交了，这会让你的页面重新加载。使用type="button" 改为点击按钮。
成功了。但是给出“[object HTMLInputElement]”而不是名称“jaykumar”
@Jaykumar 注意我在编辑你的问题时添加了.value（我认为这是一个错字，但解决了你所说的问题）。另请参阅我的回答。
嗨，如果我只想使用 var x =document.getElementById("myform").elements 访问姓名和电子邮件。

标签： javascript forms dom getelementbyid

【解决方案1】：

表单中的按钮默认行为是提交表单。要更改此设置，请使用 type="button" 的按钮

function myfunction() {
  var x = document.getElementById("myform").elements["fname"].value;
  document.getElementById("demo").innerHTML = x;
}

<form id="myform">
  name<input type="textbox" name="fname"> email
  <input type="textbox" name="email">
  <button type="button" onclick="myfunction()"> Click me</button>

</form>
<div id="demo"></div>

【讨论】：