javascript - 类型错误 : Cannot set property 'innerHTML' of null with a correct script location and div ID

Question

所以我尝试弄清楚如何用我的 firebase 表中的品牌名称填充 。但是当我的页面加载innerHTML函数时发现null我有:我的脚本的正确位置 - 当我的脚本放入我的 .js 中的 OnLoad 部分或 之前我的 div 的正确名称 - 因为这是最常见的情况，我用 3 个字母重命名它，从未在文档中的其他任何地方使用过现在我有这个: <fieldset class="inline-fields" id="inline-field1"><div class = "row"> <div class = "col-sm-4"> <div class="form-group" id="select1"> <select name="select-in" id="sel" class="form-control input-lg selectpicker" data-title="Marque" data-style="input-lg btn-default" data-live-search="true"> <div id="selsel"></div> </select> </div> </div> <div class = "col-sm-8"> <div class="row"> <div class="col-sm-6"> <input type="text" class="form-control form_after input-lg" id="form1" placeholder="Email"/> </div> <div class="col-sm-6"> <input type="text" class="form-control form_after input-lg" id="form2" placeholder="Code Postal"/> </div> </div> </div></div></fieldset>我尝试将 #sel < select> 中的 #selsel < div> 作为目标，但我使用引导类粘贴整个字段集以获得更准确的信息这是js: <script type="text/javascript"> var html = ""; firebase.database().ref('brand').on('value', function(snapshot) { var brand = snapshot.val(); for (var i in brand) { if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { elem = brand[i]; console.log(elem); html += '<option>' html += elem html += '</option>' } } document.getElementById('selsel').innerHTML = html; }); </script> </body>如您所见，在正文结束之前，它使用 firebase 收集数据，最后，我的 elem 输出如下所示 elem output screenshot我的 html 输出是这样的 html output screenshot另一个有趣的事情是，当我将 #sel id 放入 document.getElementById('selsel').innerHTML = html;而不是 selsel(分别是 select#sel 和 sub-div#selsel)，我没有看到错误，但没有任何内容填充 select 最佳答案 你不能把 div里面select ，浏览器不会渲染它。运行您提供的代码片段并检查元素 仅允许在 select <option> 内使用或<optgroup> .所以只需附加 <option>直接位于 <select> 内的元素，将它们添加到 <div> 中是没有意义的。 ，除非您想要自定义选项 View ，这是另一回事。在这种情况下，您可以使用 Select2或bootstrap-select .既然你使用 bootstrap 为什么你不使用 jQuery。 <script type="text/javascript">$(document).ready(function(){ var html = ""; firebase.database().ref('brand').on('value', function(snapshot) { var brand = snapshot.val(); for (var i in brand) { if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { elem = brand[i]; console.log(elem); html += '<option>' html += elem html += '</option>' } } $("#sel").html(html); }); });</script>编辑 1由于您使用的是 Bootstrap-select，因此首先删除类 selectpicker来自<select> <div class="form-group" id="select1"> <select name="select-in" id="sel" class="form-control input-lg" data-title="Marque" data-style="input-lg btn-default" data-live-search="true"> </select></div>然后 <script type="text/javascript"> $(document).ready(function(){ var html = ""; firebase.database().ref('brand').on('value', function(snapshot) { var brand = snapshot.val(); for (var i in brand) { if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { elem = brand[i]; console.log(elem); html += '<option>' html += elem html += '</option>' } } $("#sel").html(html); $('#sel').selectpicker(); //you can pass options if you want }); }); </script> 关于javascript - 类型错误 : Cannot set property 'innerHTML' of null with a correct script location and div ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38872823/ 上一篇：javascript - 如何比较对象内的值具有不同序列的数组javascript 下一篇：javascript - 如何使用 HTML 创建 netsuite 电子邮件模板并在其中使用 freemaker 来访问用户数据 相关文章： javascript - 获取外部文件的内容并定义为变量 javascript - 为什么 console.log 显示错误属性？ javascript - 拖动时没有重影图像？ css - Django:在模板页面上隐藏必要的表格 html - 拿一个 TR 并强制它只使用 CSS 变成垂直的(像一个列表) javascript - 如何在给定的休息调用中使用 'cache: true' ？ javascript - 错误类型错误: Cannot read property 'map' of undefined angular 4 javascript - 访问从服务器返回的数据 jquery - 如何在angularjs的ngView中给出相对路径 jquery - 从颜色盒打开新的颜色盒并向其发送数据 ©2023 IT工具网  联系我们