Question

我想获取用户填写的表单并显示其输出。

所以我尝试了这个：

＆＃13;

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">

</form>

<div id="demo"></div>

<script>
	function myFunc(){
	var x = document.getElementById('username').value;
	
	document.write(x);
	}
	
	
</script>

＆＃13;

这是按预期工作的。现在，我只想通过使用id demo在div中显示它来改变它的显示方式。

所以这就是我的尝试：

＆＃13;

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">

</form>

<div id="demo"></div>

<script>
	function myFunc(){
	var x = document.getElementById('username').value;
	
	document.getElementById('demo').innerHTML =x;
	}
	
	
</script>

＆＃13;

现在你可以看到，这不起作用。它实际上显示结果，然后重新加载一个空白屏幕。我似乎无法理解为什么会这样。

从我的代码中，我可以看到我已将x分配给用户名值。所以我所做的不是使用document.write（有效），我只是希望它显示在div中。但是它会显示并加载一个空白屏幕。

有人可以让我知道我做错了什么吗？如何在div演示下显示用户输入的用户名字段的内容。这是语法错误吗？

ps：我是自学和练习，所以我只是尝试使用用户名。一旦我这样做，我将使用相同的密码代码。

Answer 1

您需要阻止表单提交。

将myFunc更改为：

function myFunc (evt) {
  evt.preventDefault();

  // everything else
}

Answer 2

您可以使用preventDefault()停止提交提交按钮。

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc(event)">

</form>

<div id="demo"></div>

<script>
	function myFunc(event){
        event.preventDefault();
	var x = document.getElementById('username').value;
	
	document.getElementById('demo').innerHTML =x;
	}
	
	
</script>

使用Javascript

2 个答案: