webAPI03-8给文本框赋值并获取文本框的值

最新推荐文章于 2021-06-08 20:34:50 发布

雨乐无穷

最新推荐文章于 2021-06-08 20:34:50 发布

阅读量316

点赞数 1

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>给文本框赋值并获取文本框的值</title>
		<style type="text/css">
			#words{
				width: 200px;
				height: 100px;
				margin: 100px auto;
				border: 1px solid orangered;
				line-height: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="text"/>
		<input type="text"/>
		<input type="text"/>
		<input type="text"/>
		<input type="text"/>
		<input type="text"/>
		<input type="button"  id="btn" value="按钮" />
		<p id="words"></p>
		
		<script type="text/javascript">
			
			//当页面加载完成时，分别给文本框赋值
			
			
			var inputs = document.getElementsByTagName('input');
			
			for(var i = 0;i < inputs.length;i++){
				inp = inputs[i];
				
				if(inp.type === 'text'){
					inp .value = i;
				}
				
			}
			
			//当点击按钮时，将文本框的内容打印出来，并以|间隔；
			var btn = document.getElementById('btn');
			var words = document.getElementById('words');
			var arry = [];
			
			btn.onclick = function(){
				for(var i = 0;i < inputs.length;i++){
					
						inp = inputs[i];
						
						if(inp.type === 'text'){
							
						inp .value = i;
							
						arry.push(inp.value);
						
						words.innerText = arry.join('|');
						
					}
				}
			}
			
		</script>
	</body>
</html>

雨乐无穷

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webAPI03-8给文本框赋值并获取文本框的值

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>给文本框赋值并获取文本框的值</title> <style type="text/css"> #words{ width: 200px; height: 100...
复制链接

扫一扫