<!-- 計算一個數的平方並顯示出來 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>計算平方</title> <script> function pf(){ var input = document.getElementById("num"); console.log(input); //獲取框內的值 var n = input.value; console.log(n); //獲取span var span = document.getElementById("result"); //判斷該值是否為數字 if(isNaN(n)){ //不是數字,需要重新輸入 span.innerHTML ="不是數字,請重新輸入數字"; }else{ //是數字,計算平方 span.innerHTML= n*n ; } } </script> </head> <body> <!-- 1 如何獲取網頁上的一個元素 document.getElementById("id") 2 如何讀寫文本框的值 讀:input.value 寫:input.value = "abc" 3 如何讀寫span的內容 讀:span.innerHTML 寫:span.innerHTML = "abc" --> <input type="text" id ="num"/> <input type="button" value="平方" onclick="pf();"/> =<span id="result"> </span> </body> </html>
效果:文本輸入77,點擊平方返回數字