javascript基礎-《web前端最佳實務》

標籤：text   百度   rem   元素   html5   web前端   顯示   載入   name   

先貼代碼

 1     <form action=""> 2         <p> 3             <label for="x">Number:</label> 4             <input id="x" name="x" type="number" /> 5         </p> 6         <input id="submit" type="submit" value="Calculat Square" /> 7         <script> 8         var x = document.getElementById(‘x‘); 9         var output = document.createElement(‘p‘);10         output.textContent = ‘Type a number; it will be squared right then!‘;11 12         x.form.appendChild(output);13         x.form.onsubmit = function(){return false;};14         x.oninput = function(){15             var v = x.valueAsNumber;16             output.textContent = v + ‘ squared is ‘ + v*v;17         };18 19         var submit = document.getElementById(‘submit‘);20         submit.parentNode.removeChild(submit);21         </script>22     </form>

這段代碼是求平方，javascript起作用時通過JS計算直接顯示在頁面，頁面禁止載入JS時通過submit提交（參考noscript）。這裡只記錄基礎JS。

 

第9行，createElement()方法會建立一個元素節點，通常添加文本，故後面緊接著賦值output.textContent = ‘‘;然後插入顯示x.form.appendChild(output);百度的時候看到另一種用法一起貼過來

1 var btn=document.createElement("BUTTON");    //建立元素節點2 var t=document.createTextNode("CLICK ME");    //建立文本節點3 btn.appendChild(t);    //將文本節點添加到元素中

第15行，valueAsNumber是HTML5新增,可以讀取元素內數值，但是要配合<input type="number" />使用，否則會報NAN錯誤。

 

javascript基礎-《web前端最佳實務》