eventListener am Tisch funktioniert nicht

Ich mache einen Rechner und stolpere über die erste JS-Hürde. Ich versuche, Ereignis-Listener auf den Zahlentasten einzurichten, so dass eine Funktion bei Klick ausgeführt wird, aber ich bekomme den Fehler, dass ich einen Ereignishandler nicht auf Null einrichten kann. Aber ich kann nicht sehen, wo ich falsch liege !?eventListener am Tisch funktioniert nicht

Ich bin versuchen meinen Code zu organisieren, wie ich entlang ähnlich einem Online-Kurs, den ich getan habe - alle Funktionen zu trennen und zu versuchen, es leicht zu lesen.

Siehe Code und Dank im Voraus:

//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>

Quelle

2017-09-10 Tor

Es ist generell eine gute Idee, Ihre Tasten tatsächlich

Stellen Sie außerdem sicher, dass Ihr JS-Skript nach dem HTML-Code ausgeführt wird - andernfalls wird nichts gefunden, das Sie hinzufügen können. –

Vielen Dank, dass Sie sich beide angesehen haben. Hinzufügen der JS-Datei an der Unterseite hat das Problem gelöst ..! – Tor

Ein paar Dinge:

Ihre JS aus dem Kopf bewegen und knapp unterhalb, wo Sie den Körper zu schließen, . Das Skript-Tag blockiert und der Browser wird nicht mit dem Rendern Ihrer Site fortfahren, bis das Script-Element verarbeitet wurde.
Wenn ein Element interaktiv sein soll, versuchen Sie ein Element zu verwenden, das dafür gedacht ist. Verwenden Sie ein Ankerelement (a), um zwischen den Dokumenten und Schaltflächen (button) für die meisten anderen Interaktionen zu navigieren.
Eine HTML-Tabelle benötigt eine tbody.
Ihr JS-Code ist ziemlich viel und ich hatte keine Zeit, um alles durchzugehen, also machte ich dieses kleine Beispiel, wie es funktionieren könnte. Ich hoffe, du kannst es in deine Situation übersetzen.

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);

<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>

Quelle

2017-09-10 20:22:28 Thijs

danke, dass du dir die Zeit genommen hast nachzusehen. Es ist sehr hilfreich. – Tor

eventListener am Tisch funktioniert nicht

Antwort

Verwandte Themen