javascript - eventListener on table not working -
i'm making calculator , i'm stumbling @ first js hurdle. i'm trying set event listeners on number buttons functions runs on click, error can't set event handler on null. can't see going wrong!?
i trying organise code go along similar online course did - separating out functions , trying keep easy read.
see code , in advance:
//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. number html click selectednumber = document.queryselector(dom.number).innerhtml; console.log(number); //2. add 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">←</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">÷</td> </tr> <tr> <td class="number">4</td> <td class="number">5</td> <td class="number">6</td> <td class="operator">×</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">+</td> </tr> </table> </div> </div> </body> </html>
a couple of things:
- move js out of head , below close body. script tag blocking , browser won't continue rendering site till has processed script element.
- if want element interactive, try use element meant it. use anchor (
a) element navigate betweens documents , buttons (button) other interactions. - an html table needs
tbody. - your js code quite lot , didn't have time go through of made small example on how work. hope can translate situation.
const calcbuttons = document.queryselector('.calcbuttons'); function oncalcbuttonclicked(event) { debugger; const clickedbutton = event.target; if (clickedbutton.hasattribute('data-number')) { console.log('the user inputted number: ', clickedbutton.getattribute('data-number')); } else if (clickedbutton.hasattribute('data-action')) { console.log('the user selected action: ', clickedbutton.getattribute('data-action')); } } calcbuttons.addeventlistener('click', oncalcbuttonclicked);<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">←</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">÷</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">×</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">+</button></td> </tr> </tbody> </table> </div> </div>
Comments
Post a Comment