How can i use eval function

I am creating calculator with Javascript and i have a problem with eval() function
HTML
`

        <div class="calCul1">
            <div id="firstCol">
                <div id="wind"></div>
            </div>
            <div id="secondCol">
                <div class="buttonsCol1">
                    <div id="underCol1">
                        <div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
                        <div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
                        <div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
                        <div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
                        <div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
                    </div>
                    <div id="underCol2">
                        <div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
                        <div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
                        <div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
                        <div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
                        <div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
                    </div>
                </div>
                <div class="buttonsCol2">
                    <div id="underCol3">
                        <div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
                        <div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
                        <div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
                        <div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
                        <div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
                    </div>
                    <div id="underCol4">
                        <div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
                        <div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
                        <div id="multiply"><button id="multiplyBut"  onclick="add('*')">x</button></div>
                        <div id="minuse"><button id="minuseBut"  onclick="add('-')">-</button></div>
                        <div id="plus"><button id="plusBut"  onclick="add('+')">+</button></div>
                    </div>
                </div>
            </div>
        </div>

`
there is no reaction when i click on "+"
Javascript

let x = document.getElementById("wind");
function add(a) {
  // document.getElementById("wind").value =
  x.innerHTML += a;
}
function equal() {
  // x.style.cssText = `d`
  x = eval(x);
  // console.log(x);
}

i tried to solve it with .value, but then I couldnt even print the numbers

>Solution :

The issue is here: x = eval(x);. You are just getting all of the object. In your code, the x variable means that the Document method getElementById(). It returns an element object. You should get the element’s value, not all of its. Because of that, we use the element property innerHTML. the innerHTML property gets or sets the HTML or XML within the element.

Hope it helps! In addition: Never use eval()!

let x = document.getElementById("wind");
function add(a) {
  // document.getElementById("wind").value =
  x.innerHTML += a;
}
function equal() {
  // x.style.cssText = `d`
  x.innerHTML = eval(x.innerHTML);
  // console.log(x);
}

<div class="calCul1">
            <div id="firstCol">
                <div id="wind"></div>
            </div>
            <div id="secondCol">
                <div class="buttonsCol1">
                    <div id="underCol1">
                        <div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
                        <div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
                        <div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
                        <div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
                        <div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
                    </div>
                    <div id="underCol2">
                        <div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
                        <div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
                        <div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
                        <div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
                        <div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
                    </div>
                </div>
                <div class="buttonsCol2">
                    <div id="underCol3">
                        <div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
                        <div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
                        <div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
                        <div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
                        <div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
                    </div>
                    <div id="underCol4">
                        <div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
                        <div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
                        <div id="multiply"><button id="multiplyBut"  onclick="add('*')">x</button></div>
                        <div id="minuse"><button id="minuseBut"  onclick="add('-')">-</button></div>
                        <div id="plus"><button id="plusBut"  onclick="add('+')">+</button></div>
                    </div>
                </div>
            </div>
        </div>