Can I remove the duplicacy of javascript eventlisteners(each of the listeners listens to either a mathematical operator or a variable between 0 and 9

Question



    let buffer = [];
    let arrayOfNumbers=[];
            
    document.addEventListener('DOMContentLoaded', () => {
        
                    document.getElementById('buffer1').style.color = 'purple';
                    document.getElementById('buffer1').style.backgroundColor = 'tomato';
                    document.getElementById('buffer1').style.fontWeight = 'bold';
                      
                    document.getElementById('one').addEventListener('click', () => {
                    Calculat(document.getElementById('one').textContent);});
                
                    document.getElementById('two').addEventListener('click', () => {
                    Calculat(document.getElementById('two').textContent);});
                    
                    document.getElementById('three').addEventListener('click', () => {
                    Calculat(document.getElementById('three').textContent);});  
                    
                    document.getElementById('four').addEventListener('click', () => {
                    Calculat(document.getElementById('four').textContent);});
                    
                    document.getElementById('five').addEventListener('click', () => {
                    Calculat(document.getElementById('five').textContent);});
                    
                    document.getElementById('six').addEventListener('click', () => {
                    Calculat(document.getElementById('six').textContent);});
                    
                    document.getElementById('seven').addEventListener('click', () => {
                    Calculat(document.getElementById('seven').textContent);});
                    
                    document.getElementById('eight').addEventListener('click', () => {
                    Calculat(document.getElementById('eight').textContent);});

                    document.getElementById('nine').addEventListener('click', () => {
                    Calculat(document.getElementById('nine').textContent);});
                    
                    document.getElementById('zero').addEventListener('click', () => {
                    Calculat(document.getElementById('zero').textContent);});
                    
                    document.getElementById('dot').addEventListener('click', () => {
                    Calculat(document.getElementById('dot').textContent);});
                            //operators
                    document.getElementById('plus').addEventListener('click', () => {
                    Calculat(document.getElementById('plus').textContent);});
                
                    document.getElementById('sub').addEventListener('click', () => {
                    Calculat(document.getElementById('sub').textContent);});

                    document.getElementById('multiply').addEventListener('click', () => {
                    Calculat(document.getElementById('multiply').textContent);});
                    
                    document.getElementById('divide').addEventListener('click', () => {
                    Calculat(document.getElementById('divide').textContent);});

                    document.getElementById('lbrace').addEventListener('click', () => {
                    Calculat(document.getElementById('lbrace').textContent);});
           
                    document.getElementById('rbrace').addEventListener('click', () => {
                    Calculat(document.getElementById('rbrace').textContent);});
                    
                    document.getElementById('equal').addEventListener('click', () => {
                    Calculat(document.getElementById('equal').textContent);});
                    
                    document.getElementById('clear').addEventListener('click', () => {
                        buffer = [];
                        arrayOfNumbers=[];
                        document.getElementById('result').textContent=('');
                        document.getElementById('buffer1').textContent=('');
                        });
                        
        });

    function Calculat(z) {
                      document.getElementById('buffer1').append(z);

    if (z =='='){
     console.log("Mathematical Array : " + arrayOfStrings);
     console.log("Result is : " + eval(arrayOfStrings));
       document.getElementById('result').style.color = 'red';
          document.getElementById('result').style.backgroundColor = 'lightgrey';
          document.getElementById('result').style.fontWeight = 'bold';


    let result = Function("return " + arrayOfStrings)(); 
    console.log(result)

    document.getElementById('result').textContent=result;
    return false;

    }

    buffer.push(z);
    arrayOfStrings = buffer.join("");

    }
    .flex-container {
      display: flex;
      background-color: Blue;
      justify-content: left;
     
    }

    .flex-container > div {

     background-color: deepskyblue;
      margin: 8px;
      padding: 20px;
      font-size: 30px;

    }
    <div class="flex-container">
       <div>Array:</div>
       <div id="buffer1">&nbsp;&nbsp;&nbsp;&nbsp;</div>

    </div>
    <div class="flex-container">
        <div id="one">1</div>
        <div id="two">2</div>
        <div id="three">3</div>
        <div id="four">4</div>
        <div id="zero">0</div>
        
    </div>


    <div class="flex-container">
        <div id="five">5</div>
        <div id="six">6</div>
        <div id="seven">7</div>
        <div id="eight">8</div>
            <div id="nine">9</div>

    </div>

    <div class="flex-container">
       <div id="plus">+</div>
        <div id="sub">-</div>
        <div id="multiply">*</div>
        <div id="divide">/</div>
           <div id="equal">=</div>

    </div>

    <div class="flex-container">
       <div id="dot">.</div>
       <div id="clear">CLR</div>
       <div id="lbrace">(</div>
       <div id="rbrace">)</div>

    </div>
    <div class="flex-container">
       <div>Result:</div>
       <div id="result"></div>
    </div>

I have made a working Javascript calculator for basic mathematics operations,It take in a integer or float and performs the mathematical evaluation;I feel some functions in the javascript like Calculat are duplicated. Please suggest some code optimisation ideas (for example for action event listeners or any other code)

I think it would be better to ask this here: https://codereview.stackexchange.com/ — A_A, Aug 28 '22 at 18:08
That said, you could for instance use an array like `['one', 'two', ..., 'nine']`, loop over it, and inside this loop create the event listeners. Or you could do it with a class like here: https://stackoverflow.com/a/19655662/6548154 — A_A, Aug 28 '22 at 18:10
ohh i did not know abt https://codereview.stackexchange.com/ nice thanks — Michael36, Aug 28 '22 at 19:49

score 1 · Accepted Answer · answered Aug 28 '22 at 18:19

you can use bubbling here, add some div wrapper to html like

<div id="wrapper">
   <!-- current html -->
</div>

then attach event listener to it and remove all listeners that is inside your wrapper

document.getElementById('wrapper').addEventListener('click', (e) => Calculat(e.target.textContent))

and final code will be following

    document.addEventListener('DOMContentLoaded', () => {
    
                document.getElementById('buffer1').style.color = 'purple';
                document.getElementById('buffer1').style.backgroundColor = 'tomato';
                document.getElementById('buffer1').style.fontWeight = 'bold';
                  
                document.getElementById('wrapper').addEventListener('click', (e) => Calculat(e.target.textContent))
                
                document.getElementById('clear').addEventListener('click', () => {
                    buffer = [];
                    arrayOfNumbers=[];
                    document.getElementById('result').textContent=('');
                    document.getElementById('buffer1').textContent=('');
                    });
                    
    });

Thank you so much for letting me know the bubbling concept, it works and also reduced the lines of code. — Michael36, Aug 29 '22 at 08:37

Can I remove the duplicacy of javascript eventlisteners(each of the listeners listens to either a mathematical operator or a variable between 0 and 9

1 Answers1