Question

我是JavaScript和JQuery的新手，我正在试图找出为什么当我按下按钮时我的函数没有被调用。我唯一的线索是Firefox控制台显示TypeError：document.getElementById（...）为null。我找到了this示例，其中说“如果在文档完成解析后调用它，则document.write将覆盖整个DOM”，这就是它发生的原因。我查看了我的代码，然后将按钮移动到我的div标签中，它仍在发生。我也尝试将按钮移动到它自己的div标签中。当我尝试在按钮所在的位置添加html标签时，编译器似乎不喜欢语法。我不确定我应该做些什么来解决这个问题。

我按照this示例查看按钮单击时的函数调用。希望我把它应用到我的项目中。

这是我的代码：

 <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.

-->
<html>
    <head>
        <title>jQuery Michele Project</title>
        <link href="css/skins/polaris/polaris.css" rel="stylesheet">
        <link href="css/skins/all.css" rel="stylesheet">
        <link href="css/demo/css/custom.css" rel="stylesheet">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script src="js/icheck.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.input').iCheck({
                    checkboxClass:'icheckbox_polaris',
                    radioClass:'iradio_polaris',
                    increaseArea:'10%'
                });
            });
        </script>

        <script type="text/javascript">
            // Returns an array with values of the selected (checked) checkboxes in "frm"
            function getSelectedChbox(frm) {
                // JavaScript & jQuery Course - http://coursesweb.net/javascript/
                var selchbox = [];        // array that will store the value of selected checkboxes

                // gets all the input tags in frm, and their number
                var inpfields = frm.getElementsByTagName('input');
                var nr_inpfields = inpfields.length;

                // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
                for(var i=0; i<nr_inpfields; i++) {
                    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
                        selchbox.push(inpfields[i].value);
                }
                return selchbox;
            }

            document.getElementById('btntest').onclick = function() {
                var selchb = getSelectedChbox(this.form);
                alert(selchb);
            }
        </script>
        <style type="text/css">
            ul {list-style-type: none}
            img {padding-right: 20px; float:left}
            #infolist {width:500px}
        </style>
    </head>
    <body>
        <form>
            <div class="skin skin-line">
                <div class="arrows">
                    <div class="top" data-to="skin-flat"></div>
                    <div class="bottom" data-to="skin-polaris"></div>
                </div>
            </div>
            <div class="skin skin-polaris">
                <div class="arrows">
                    <div class="top" data-to="skin-line"></div>
                    <div class="bottom" data-to="skin-futurico"></div>
                </div>
                <h3>Select Items for Column Headings</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
                                    <label for="polaris-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
                                    <label for="polaris-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="polaris-checkbox-3" >
                                    <label for="polaris-checkbox-3">Checkbox 3</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="polaris-checkbox-4" checked >
                                    <label for="polaris-checkbox-4">Checkbox 4</label>
                                </li>
                            </ul>
                        </div>
                        <script>
                        $(document).ready(function(){
                            $('.skin-polaris input').iCheck({
                                checkboxClass: 'icheckbox_polaris',
                                radioClass: 'iradio_polaris',
                                increaseArea: '20%'
                            });
                        });
                        </script>
                        //$('#checkbox').prop('checked')
                    </dd>
                </dl>
            </div>
            <div id="loading">
                <input type="button" value="Click" id="btntest" /> 
            </div>
        </form>
    </body>
</html>

Answer 1

问题是您在DOM中元素可用之前分配了单击处理程序。要解决此问题，您应该将其包装在DOM ready函数中：

$(function(){
    document.getElementById('btntest').onclick = function() {
        var selchb = getSelectedChbox(this.form);
        alert(selchb);
    }
});

注意：$(function(){ ... });是$(document).ready(function(){ ... });

的快捷方式

Answer 2

在该元素存在之前，您正在运行document.getElementById('btntest')。将此脚本放在页面上的按钮之后，而不是之前：

<script>
    document.getElementById('btntest').onclick = function() {
        var selchb = getSelectedChbox(this.form);
        alert(selchb);
    }
</script>

当我单击按钮时，函数不会被调用

2 个答案: