javascript的getElementsByName()的應用


<html>

<head>
<title>getElementByName</title>
</head>
<body>
<form name="from1" action="text.html" method="post">
<input type="text" name="username" value="Id1" id="tid1" οnchange="change()"/><br/>
<input type="text" name="username" value="Id2" id="tid2"/><br/>
<input type="text" name="username" value="Id3" id="tid3"/><br/>
<input type="button" name="ok" value="baocun"/>
</form>
</body>
<script language="JavaScript">
//通過元素的name屬性獲取所有元素的引用
var inputgetElements=document.getElementsByName("username");

//測試該數據的長度

alert(inputgetElements.length);

//遍歷元素,輸出所有value屬性的值

//for(var i=0;i<inputgetElements.length;i++){
//var inputgetElement=inputgetElements[i];
//alert(inputgetElement.value);
//}


//爲每個文本框(<input type="text"/>)增加change事件,當值改變時,輸出改變的值

//改一個
function change(){
alert(document.getElementById("tid1").value);
}
//同時改三個
for(var i=0;i<inputgetElements.length;i++){//先獲取有多少個input,講他進行遍歷
var inputgetElement=inputgetElements[i];
//把onchange相當於一個屬性
//爲每一個文本框註冊onchange事件
inputgetElement.οnchange=function(){
//this表示當前的對象

alert(this.value);          //其實通過getElementById也可以獲取到單個的  getElementsByName是獲取到一個集合 上面是由getElementsByName獲取到的

if(this.value.length>6){
alert("www");//這個是當輸入的長度超過6的時候輸出
}else{
this.value="";//沒有滿這個長度就將剛用戶輸的清空
}
}

}

</script>
</html
發佈了31 篇原創文章 · 獲贊 0 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章