The logic for power on/off button in javascript not working

I am trying to build a simple calculator using HTML, CSS and Javascript. I have added the feature of power ON and OFF for the calculator. What I want is, if the power OFF button is clicked then the calculator screen does not take any input until power ON button is clicked.(I got this functionality correct). The issue I am facing is,

  1. When I click power ON after clicking power OFF, the required statement as mentioned in the code is not displayed.
  2. It takes input multiple times even though the button is clicked only once thereafter.

I tried but could not identify what the error is. I am new to Javascript. Kindly help me. Thanks. Here is the code:

let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
var screenvalue;
let string;
var buttonText = "";
let status = false;


document.getElementById("onbtn").addEventListener('click',(f) => {            
    buttonText = f.target.innerText; 
    if(buttonText == 'ON'){
    status = true;
    screen.value = "Power On";
    screenvalue = ' ';
    string=" ";
     
    }
   
for(item of buttons){
    
    if(status==false){
      console.log("after power off" +string);
      console.log("after power is off" +screenvalue);
      screen.value = "Turn on power";
    }
   else{
    item.addEventListener('click', (e) => {
            buttonText = e.target.innerText;
            
            if(status==true && buttonText == 'X'){
                buttonText = '*';
                string = string + buttonText;
                screenvalue = screenvalue + buttonText;
                screen.value = screenvalue; 
            }

            else if(status==true && buttonText =='AC'){
                string=" ";
                screenvalue = "";
                screen.value = "";
            }

            else if(status==true && buttonText == '='){
                screenvalue = eval(screenvalue);
                string = screenvalue.toString();
                screen.value = screenvalue;
            }

            else if(status==true && buttonText == 'C'){
               string = string.slice(0,-1);
               screenvalue = string;
               screen.value = screenvalue;
            }

           else if(status==true && buttonText == 'OFF'){
                status = false;
                
                screen.value = "Power Off";
                string = " ";
                screenvalue = ""; 
           console.log("value of string in off "+string);
 console.log("value of screenvalue in off "+screenvalue); 
           return;} 
                                
         
                else{
                    if(status == true){
                screenvalue = screenvalue + buttonText;
                screen.value = screenvalue;
                string = screenvalue.toString();}
            }
        })
   }
 }
})
.container{
    text-align: center;
    margin-top: 25px;
}
.calculator{
    display: inline-block;
    border: 2px black;
    background-color: firebrick;
    height: 480px;
    border-radius: 15px;
    padding: 8.5px;



    
}
table{
    margin: auto;
    margin-top: 20px;
}
input{
    font-size: 30px;
    height: 70px;
    border: solid;
    border-color: black;
    border-width: 2.5px;
    border-radius: 24px;
    margin-top:23px;
    width: 368px
}
button{
    margin-top: 2px;
    font-size: 20px;
    background: lemonchiffon;
    width: 92px;
    height: 50px;
    border-radius: 24px;
    padding: 5px;
}
button:hover{
    background-color: plum;
}
button:active{
    background-color: palevioletred;
}
<body>
    <div class="container">
        <h1>Calculator</h1>
        <div class="calculator">
        <input type="text" name="screen" id="screen">
        <table>
            <tr>
                <td><button>(</button></td>
                <td><button>)</button></td>
                <td><button>C</button></td>
                <td><button>/</button></td>
            </tr>

            <tr>
                <td><button>9</button></td>
                <td><button>8</button></td>
                <td><button>7</button></td>
                <td><button>+</button></td>
            </tr>

            <tr>
                <td><button>6</button></td>
                <td><button>5</button></td>
                <td><button>4</button></td>
                <td><button>-</button></td>
            </tr>

            <tr>
                <td><button>3</button></td>
                <td><button>2</button></td>
                <td><button>1</button></td>
                <td><button>X</button></td>
            </tr>

            <tr>
                <td><button>0</button></td>
                <td><button>.</button></td>
                <td><button>=</button></td>
                <td><button>%</button></td>
            </tr>

            <tr>
                <td><button>AC</button></td>
                <td><button id="onbtn">ON</button></td>
                <td><button>OFF</button></td>
                <td><button></button></td>
            </tr>
        </table>
        </div>
    </div>
   
   
</body>

Answer

The input duplicates after power on/off because you are adding the event listener again so the code runs multiple times per button press. You need to remove event listeners https://www.w3schools.com/jsref/met_element_removeeventlistener.asp Or use a different solution (Like with a boolean) to straight-up track calculator state. I was unable to reproduce the on/off weirdness you talked about in the question in my local environment, however.