<!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>
webAPI03-8给文本框赋值并获取文本框的值
最新推荐文章于 2021-05-20 08:25:52 发布