document.getElementById().value函数都必须在触发事件时使用才有效吗

来源:7-7 JS对表单元素进行设置4

biudiudiu

2019-09-18 11:20:40

<script>
  var xb=document.getElementById("xb");
  var t=parseInt(xb.value);
  console.log(xb);
  console.log(t);
  </script>
<body>
    
  <form>
   
   <select id="xb" value="1" >
    <option > 1 </option> 
   </select>
  </form>
 
</body>  
为什么在没有触发事件时使用这类函数没有效果甚至报错


写回答

3回答

好帮手慕小班

2019-09-18

同学你好,1、不建议将script的内容放在head中加载,因为如果放在head中,页面的加载顺序是自上而下的,在head中加载script内容时,页面中的对象等内容可能还没有加载,就获取不到,此时在控制台中会报错的,例如:

http://img.mukewang.com/climg/5d81fa4909a7654805560413.jpg

对应

http://img.mukewang.com/climg/5d81fa570968211704750139.jpg

2、将script方法body的底部就不会报错了哦,例如:

http://img.mukewang.com/climg/5d81faba0927ae6605190456.jpg

对应在页面中就不会报错

http://img.mukewang.com/climg/5d81fabf09e8114702660136.jpg

3、同学说自己的控制台报错,请问报错内容是什么呐。建议同学贴出报错截图。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

1

好帮手慕小班

2019-09-18

同学你好,1、document.getElementById().value不是只能用在触发事件中,也可以直接获取到这个对象的value值,例如:

http://img.mukewang.com/climg/5d81dcd009b4cfd605540452.jpg

对应在页面中:

http://img.mukewang.com/climg/5d81dce1092fef8a03170330.jpg

2、options集合可返回包含 <select> 元素中所有 <option> 的一个数组。

var  xb=document.getElementById("xb"),xb是获取到了这个select对象,xb.options就是获取到这个select中所有的option的集合

对应xb.options.length就是获取到这个集合的长度,xb.options.add()就是插入一个新的option元素。    其中new Option(参数1,参数2),通过调用构造函数 Option(),来创建一个新的 option 对象。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

0
hiudiudiu
h <body> <form> <select id="xb" value="1"></select> <form> <script> var xb=document.getElementById("xb").value; console.log(xb); </script> </body>
h019-09-18
共4条回复

biudiudiu

提问者

2019-09-18

还有就是.options这种内置函数的功能到底干什么的一会儿能显示数组长度一会儿能向select标签中插入option子元素,很懵啊

对象.options.length

对象.options.add(new Option(test,value))

0

0 学习 · 9666 问题

查看课程