javascript基础-《web前端最佳实践》

Posted 2020-09-09

先贴代码

 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错误。