Question

我正在制作一个计算器而且我遇到了第一个JS障碍。我正在尝试在数字按钮上设置事件侦听器，以便在单击时运行函数，但是我得到错误，我无法在null上设置事件处理程序。但我看不出我错在哪里！？

我尝试来组织我的代码，就像我在线课程一样 - 分离出所有功能并试图让它易于阅读。

请参阅代码并提前致谢：

//TOTAL CONTROLLER
var totalController = (function () {

})();

//UI CONTROLLER
var UIController = (function () {

    var DOMstrings = {
        calcbuttons: '.calcButtons',
        number: '.number',
        operator: '.operator',
        equals: '.equals',
        total: '#total'
    };

    return {

        getDOMstrings: function () {
            return DOMstrings;
        }
    };

})();


//GLOBAL CONTROLLER
var controller = (function (totalCTRL, UICtrl) {

    var setupEventListeners = function () {
        var DOM = UICtrl.getDOMstrings();

        var el = document.querySelector(".calcButtons");

        el.addEventListener('click', function (e) {
            //var table = e.target;
            //if (table.classList) 

            console.log(e);
            //ctrlAddNumber();

        });

        // click operator
        //click C
        //click AC
        //click equals

    };

    var ctrlAddNumber = function () {
        var selectedNumber;

        //1. get number from html from click
        selectedNumber = document.querySelector(DOM.number).innerHTML;
        console.log(number);
        //2. add to display

    };

    return {
        init: function () {
            console.log('Application has started.');
            setupEventListeners();
        }
    };

})(totalController, UIController);

controller.init();

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link type="text/css" rel="stylesheet" href="calc_style.css" />
    <style>
        @import url('https://fonts.googleapis.com/css?family=Lato');
    </style>
    <script type='text/javascript' src='calcjs.js'></script>
    <title>JavaScript Calculator</title>
</head>
<body>
    <div id="container">
        <div id="calculator">
            <div id=t otal></div>

            <table class="calcButtons" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="wide">AC</td>
                    <td class="wide">&larr;</td>
                    <td class="wide"></td>
                    <td class="operator"></td>
                </tr>
                <tr>
                    <td class="number">7</td>
                    <td class="number">8</td>
                    <td class="number">9</td>
                    <td class="operator">&#247;</td>
                </tr>
                <tr>
                    <td class="number">4</td>
                    <td class="number">5</td>
                    <td class="number">6</td>
                    <td class="operator">&#215;</td>
                </tr>
                <tr>
                    <td class="number">1</td>
                    <td class="number">2</td>
                    <td class="number">3</td>
                    <td class="operator">-</td>
                </tr>
                <tr>
                    <td class="number">0</td>
                    <td>.</td>
                    <td id="equals" class="equals">=</td>
                    <td class="operator">&#43;</td>
                </tr>
            </table>

        </div>
    </div>
</body>
</html>

Answer 1

有几件事：

将你的JS移出头部，然后在靠近身体的地方。脚本标记处于阻止状态，浏览器不会继续渲染您的网站，直到它处理完脚本元素。
如果您希望元素是交互式的，请尝试使用适合它的元素。对于大多数其他交互，使用锚点（a）元素在文档和按钮（button）之间导航。
HTML表格需要tbody。
你的JS代码非常多，我没有时间完成所有这些，所以我就它如何运作做了一个小例子。我希望你能把它转化为你的情况。

＆＃13;

const
  calcButtons = document.querySelector('.calcButtons');
  

function onCalcButtonClicked(event) {
    debugger;  
  const
    clickedButton = event.target;

  if (clickedButton.hasAttribute('data-number')) {
    console.log('The user inputted a number: ', clickedButton.getAttribute('data-number'));
  } else if (clickedButton.hasAttribute('data-action')) {
    console.log('The user selected an action: ', clickedButton.getAttribute('data-action'));
  }
}


calcButtons.addEventListener('click', onCalcButtonClicked);

＆＃13;

<div id="container">
    <div id="calculator">
        <div id="total"></div>

        <table class="calcButtons" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td><button type="button" data-action="" class="wide">AC</button></td>
                    <td><button type="button" data-action="" class="wide">&larr;</button></td>
                    <td><button type="button" data-action="" class="wide"></button></td>
                    <td><button type="button" data-action="" class="operator"></button></td>
                </tr>
                <tr>
                    <td><button type="button" data-number="7" class="number">7</button></td>
                    <td><button type="button" data-number="8" class="number">8</button></td>
                    <td><button type="button" data-number="9" class="number">9</button></td>
                    <td><button type="button" data-action="plus" class="operator">&#247;</button></td>
                </tr>
                <tr>
                    <td><button type="button" data-number="4" class="number">4</button></td>
                    <td><button type="button" data-number="5" class="number">5</button></td>
                    <td><button type="button" data-number="6" class="number">6</button></td>
                    <td><button type="button" data-action="times" class="operator">&#215;</button></td>
                </tr>
                <tr>
                    <td><button type="button" data-number="1" class="number">1</button></td>
                    <td><button type="button" data-number="2" class="number">2</button></td>
                    <td><button type="button" data-number="3" class="number">3</button></td>
                    <td><button type="button" data-action="minus" class="operator">-</button></td>
                </tr>
                <tr>
                    <td><button type="button" data-number="0" class="number">0</button></td>
                    <td><button type="button" data-number=".">.</button></td>
                    <td><button type="button" data-action="equals" id="equals" class="equals">=</button></td>
                    <td><button type="button" data-action="divide" class="operator">&#43;</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

＆＃13;

表上的eventListener不起作用

1 个答案: