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 - 有没有办法根据它在 div 中的位置将 "active"类添加到列表项？

javascript - jQuery 淡出内容，然后连续淡入新内容

javascript - 模态框打开有奇怪的效果

javascript - 使用 innerHtml 创建包含许多元素的 div 时出错

javascript - 页面没有占用整个 div 的大小

javascript - jQuery .prependTo() 创建的表导致浏览器出现 "lag"

javascript - 用js设置不透明度或关闭模态窗口

javascript - Chrome 扩展程序如何收到后台脚本要关闭的通知？

jquery - 如何在单击按钮时显示和隐藏部分 View ？

javascript - CSS 滚动动画不会在 django 中运行

©2024 IT工具网  联系我们

Answer 1

你不能把 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>