Ну с того что я заметил сразу зачем тебе делать в каждом файле state с меню сделай себе файл state.jsа как он должен выглядеть? Класс со стейтом и методами которые возвращают стейт класса ?
//alert(3)
let i , numArr;
function init () {
i = 0;
numArr = [];
document.getElementById("calc-field").value = "";
}
document.querySelector('.numbers').addEventListener( 'click' , function () {
//Setting up numbers buttons in calc
let eventClassName= event.target.className;
let numButton = parseInt(eventClassName.replace('button-', ''));
if (numButton || numButton === 0) {
numArr[i] = numButton;
i++;
document.getElementById("calc-field").value = numArr.join("");
//console.log(numButton);
//console.log(numArr);
}
})
document.querySelector('.calc-func').addEventListener( 'click' , function () {
//Setting up arithmetic func of calc
let eventClassName= event.target.id.split("_");
numArr.push(eventClassName[1]);
i++;
document.getElementById("calc-field").value = numArr.join("");
console.log(eventClassName[1])
})
document.querySelector('.calc-button').addEventListener( 'click' , function () {
//Setting up arithmetic func of calc
document.getElementById("calc-field").value = eval(document.getElementById("calc-field").value);
console.log(eval(document.getElementById("calc-field").value));
})
document.querySelector('.refresh').addEventListener( 'click' , function () {
//Refresh all data
init()
})
init()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="calc-field" >
<input class="calc-button" type="button" value="CALC">
<input class="refresh" type="button" value="REFRESH">
<ul class="calc-func">
<li id="divid_/">/</li>
<li id="=times_*">*</li>
<li id="plus_+">+</li>
<li id="min_-">-</li>
</ul>
<ul class="numbers">
<li class="button-1">1</li>
<li class="button-2">2</li>
<li class="button-3">3</li>
<li class="button-4">4</li>
<li class="button-5">5</li>
<li class="button-6">6</li>
<li class="button-7">7</li>
<li class="button-8">8</li>
<li class="button-9">9</li>
<li class="button-0">0</li>
</ul>
<script src="./index.js" ></script>
</body>
</html>p {
color: aqua;
}
p {
height: 100px;
margin-bottom: 10px;
width: 300px;
background-color: aliceblue;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 36px;
padding: 13px;
background-color: violet;
}
li:hover {
background-color: red;
cursor: pointer;
}
.numbers {
background-color: blue;
margin-top: 20px;
width: 240px;
}
.numbers > li:nth-child(-n+5) {
margin-bottom: 10px;
}