11-EX05

11-EX05/scripts/main.js

@@ -1,7 +1,3 @@
-let addInputButton = document.getElementById('addInput');
-let addMultipleInputsButton = document.getElementById('addMultipleInput');
-let removeMultipleInputsButton = document.getElementById('addMultipleInput');
-
 let numberContainer = document.getElementById('numberContainer');
 let resultContainer = document.getElementById('resultContainer');
 
@@ -11,7 +7,6 @@ let productResult = document.getElementById('productResult');
 let main = document.querySelector('main');
 
 function sum(event) {
-    event.preventDefault();
     let numbers = document.querySelectorAll('.number');
     let sum = 0;
     for (let i = 0; i < numbers.length; i++) {
@@ -21,7 +16,6 @@ function sum(event) {
 }
 
 function product(event) {
-    event.preventDefault();
     let numbers = document.querySelectorAll('.number');
     let product = 1;
     for (let i = 0; i < numbers.length; i++) {
@@ -31,25 +25,20 @@ function product(event) {
 }
 
 function addInput(event) {
-    event.preventDefault();
     let d = document.createElement('p');
     d.innerHTML =
         'number: <input type="number" name="number" class="number" value="0" /><button class="xButton">X</button> </br>';
     numberContainer.appendChild(d);
-    sum(event);
-    product(event);
+    updateResults(event);
 }
 
 function remove(event) {
-    event.preventDefault();
     if (event.target.matches('.xButton')) {
-        let xButtons = document.querySelectorAll('.xButton');
-        if (xButtons.length > 2) {
+        if (numberContainer.children.length > 2) {
             event.target.parentNode.remove();
         }
-        sum(event);
-        product(event);
     }
+    updateResults(event);
 }
 
 function addMultipleInputs(event) {
@@ -59,9 +48,22 @@ function addMultipleInputs(event) {
     }
 }
 
-main.addEventListener('input', sum);
-main.addEventListener('input', product);
-addInputButton.addEventListener('click', addInput);
-addMultipleInputsButton.addEventListener('click', addMultipleInputs);
+function updateResults(event) {
+    sum(event);
+    product(event);
+}
+
+function buttonClicked(event) {
+    if (event.target.matches('#addMultipleInput')) {
+        addMultipleInputs(event);
+    }
+    if (event.target.matches('#addInput')) {
+        addInput(event);
+    }
+    if (event.target.matches('.xButton')) {
+        remove(event);
+    }
+}
 
-numberContainer.addEventListener('click', remove);
+main.addEventListener('input', updateResults);
+main.addEventListener('click', buttonClicked);