Question

我正在创建一个简单的网站程序，在用户键入一些文本并单击按钮后显示用户文本输入。为此，我创建了一个名为“textWrite（）”的函数，该函数将在单击按钮OK时执行。但是，当我单击按钮时，文本会在很短的时间内显示，并在消失后很快显示。

这是我的代码：

body {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Sava_river_in_Belgrade,_view_from_Kalemegdan_fortress.jpg);
}

#inputCharacter {
	height: 400px;
	width: 400px;
	background-color: rgba(0, 60, 200, 0.6);
	position: relative;
	left: 560px;
	top: 80px;
	border-radius: 5px;
}

#inputField {
	height: 20px;
	width: 260px;
	margin-left: 65px;
	margin-top: 100px;
	padding: 5px;
}

#heading {
	position: relative;
	text-align: center;
	top: 90px;
	font-size: 24px;
	font-family: Verdana;
}

#submit {
	height: 30px;
	width: 60px;
	margin-left: 170px;
	margin-top: 10px;
	background-color: limegreen;
	border: 3px solid black;
	font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
	<title>Character Split</title>
	<link rel="stylesheet" type="text/css" href="inputDesign.css">
</head>
<body>
	<form id="inputCharacter">
		<h2 id="heading">Type some text</h2>
		<input type="text" name="text" id="inputField" autocomplete="off"> <br>
		<button type="submit" id="submit" onclick="textWrite()">OK</button>
		<p id="output">
			<script type="text/javascript">

		function textWrite () {

			var inputValue = document.getElementById('inputField').value;
			document.getElementById('output').innerHTML = inputValue;
		}

	</script>	
		</p>
	</form>
</body>
</html>

Answer 1

您的<button>位于<form>，并且响应表单中的按钮点击的默认内置操作是提交表单。您的页面正在重新加载。

type=button使用type=submit代替<button>。

（JavaScript）使用按钮onclick时短时间显示文本

1 个答案: