表单提交与按钮点击事件冲突

最新推荐文章于 2023-02-23 12:16:43 发布

我的征途是星辰大海。

最新推荐文章于 2023-02-23 12:16:43 发布

阅读量439

点赞数

分类专栏：问题 javascript

本文链接：https://blog.csdn.net/qq_45624685/article/details/118517602

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

问题

6 篇文章 1 订阅

订阅专栏

表单提交与按钮点击事件冲突

问题原因:想在前端写一个计算器,使用javascript单击事件控制form表单提交的时候,出现了问题.
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击和双击事件</title>
	</head>
	<body>
		<form action="">
			<input type="text">+
			<input type="text">
			<input type="submit" value="计算">
			<span>结果是:<strong style="color:red"></strong></span>
		</form>
		<script>
			//当提交表单的时候，获取两个input标签的值，然后想加，最后赋值给strong标签的文本值。
			//获取input标签
			let input = document.querySelectorAll("input");
			//获取strong标签
			let strong = document.querySelector("strong");
			//将submit标签绑定单机事件
			input[2].onclick = function () {
				console.log(input[0]);
				console.log(input[1]);
			}
		</script>
	</body>
</html>

页面如下:
在这里插入图片描述
问题描述:
当我们点击按钮"计算"时,console打印的结果,一闪而过.
解决办法.
1.使用button代替input标签
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击和双击事件</title>
	</head>
	<body>
		<form action="">
			<input type="text">+
			<input type="text">
			<!-- <input type="submit" value="计算"> -->
			<button type="button">计算</button>
			<span>结果是:<strong style="color:red"></strong></span>
		</form>
		<script>
			//当提交表单的时候，获取两个input标签的值，然后想加，最后赋值给strong标签的文本值。
			//获取input标签
			let input = document.querySelectorAll("input");
			//获取strong标签
			let strong = document.querySelector("strong");
			// 获取button标签
			let button = document.getElementsByTagName("button")[0];
			// console.log(button);
			//将submit标签绑定单机事件
			button.onclick = function () {
				console.log(input[0]);
				console.log(input[1]);
			}
		</script>
	</body>
</html>

2.这种情况是因为form后action属性没有值导致的,我们可以删除action属性或者给action属性增加一个值.
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击和双击事件</title>
	</head>
	<body>
		<form action="#">
			<input type="text">+
			<input type="text">
			<input type="submit" value="计算">
			<span>结果是:<strong style="color:red"></strong></span>
		</form>
		<script>
			//当提交表单的时候，获取两个input标签的值，然后想加，最后赋值给strong标签的文本值。
			//获取input标签
			let input = document.querySelectorAll("input");
			//获取strong标签
			let strong = document.querySelector("strong");
			//将submit标签绑定单机事件
			input[2].onclick = function() {
				console.log(input[0]);
				console.log(input[1]);
			}
		</script>
	</body>
</html>

我的征途是星辰大海。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单提交与按钮点击事件冲突

表单提交与按钮点击事件冲突问题原因:想在前端写一个计算器,使用javascript单击事件控制form表单提交的时候,出现了问题.代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>单击和双击事件</title> </head> <body> <form action=""> <input
复制链接

扫一扫