[筆記]JS 對HTML 操作
JS 對HTML 操作
讀取值
<body>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="button" value="加法" id="bt1"/>
<input type="button" value="減法" id="bt2"/>
<input type="button" value="乘法" id="bt3"/>
<input type="button" value="除法" id="bt4"/>
<input type="button" value="取餘" id="bt5"/>
<script >
var oText1=document.getElementById("text1");
var oText2=document.getElementById("text2");
var oBt1=document.getElementById("bt1");
var oBt2=document.getElementById("bt2");
var oBt3=document.getElementById("bt3");
var oBt4=document.getElementById("bt4");
var oBt5=document.getElementById("bt5");
以document.getElementById("Id");
的方式可以取得該所屬id 的元素，對其操作。
而此取得的值資料型態為字串
alert(oText1.value + oText2.value);
若要將齊做數學運算將字串轉為數值
var num1=Number(oText1.value);
var num2=Number(oText2.value);
</script>
寫入值
<body>
<!-- 計數功能 -->
<input type="text" id="test" />
<h3 id="text">0</h3>
<script >
var oText=document.getElementById("text");
var oBt=document.getElementById("bt");
var oTest=document.getElementById("test");
var index=0;
oBt.onclick=function(){
index=index+1;
//alert(index);
//標籤中的內容 元素.innerHTML
//innerHTML 修改標籤內的內容
oText.innerHTML=index;
//屬性操作
oTest.value=index;
}
</script>
留言
張貼留言