How to change the value of innerHTML after checking the value of it-CodePudding

I am coding a calculator and I want to change the value of the calculators content if the user is pressing the button "±". I tried different ways to implement this tool but it did not work. Here is the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
function appendOperation(operation) {
    document.getElementById("resultArea").innerHTML  =operation;
};

function calculateResult() {
    let container = document.getElementById('resultArea');
    let result = container.innerHTML;
    container.innerHTML = eval(result);
};

function deleteLast() {
let container = document.getElementById('resultArea');
if(container.innerHTML.endsWith(' ')) {
    container.innerHTML = container.innerHTML.slice(0, -3);
    } 
    else {
    container.innerHTML = container.innerHTML.slice(0, -1);
        }
};

function deleteContent() {
  document.getElementById('resultArea').innerHTML = "";
};

function Percent() {
 document.getElementById('resultArea').innerHTML = document.getElementById('resultArea').innerHTML / 100;

  
  
};
 
//this is the associated function 
function changingPresign() {
  document.getElementById('resultArea').innerHTML = eval(document.getElementById('resultArea').innerHTML* (-1) )
};


function squared() {
    let x = document.getElementById('resultArea')
    x.innerHTML = Math.pow(parseFloat(document.getElementById('resultArea').innerHTML), 2); // 
};      


function squareRoot() {
  document.getElementById('resultArea').innerHTML = Math.pow(parseFloat(document.getElementById('resultArea').innerHTML)
                                                            , 0.5);
};


function faculty() {
    let repetitions = 1;
    let increasment = 1;
    let input = document.getElementById('resultArea').innerHTML
    while(repetitions <= input) {
      
      increasment = increasment * repetitions;
      repetitions  ;
    document.getElementById('resultArea').innerHTML = increasment
    } ;
};

function anyExponent() {
   exponent = prompt("Nennen Sie den Exponenten");
    document.getElementById('resultArea').innerHTML = Math.pow(parseFloat(document.getElementById('resultArea').innerHTML),exponent );
};

function eulerscheZahl() {
    document.getElementById('resultArea').innerHTML = Math.exp(document.getElementById('resultArea').innerHTML);
};

function Pi() {
    document.getElementById('resultArea').innerHTML = Math.PI
}

    </script>
</head>

<style>
body {
    background-color: black;
    font-family: 'Changa', sans-serif;
    margin: 0;
}

table {
    width: 100%;
    height: 70vh;
    background-color: rgb(30, 30, 30);
    color: rgb(255, 255, 255);
}

td {
  font-size: 30px;
    text-align: center;
    background-color: black;
}

td:hover {
    cursor: pointer;
}

.operation-button {
    color: white;
    background-color: rgb(10, 146, 187);
}

.operation-button:hover {
    background-color: rgb(6, 174, 225);
}

.changing-button {
    background-color: rgb(53, 53, 53);
    color: white;
}

.changing-button:hover {
    background-color: rgb(96, 93, 93);
}

.numbers:hover {
background-color: rgb(14, 13, 13);
}

#resultArea {
    height: 30vh;
    color: white;
    font-size: 64px;
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 24px;
    box-sizing: border-box;
    
    
}
#resultarea:hover {
    color: #0a92bb;
}

#brackets {
width: 25%;
}







</style>


<body>

    <div id="resultArea"></div>

    <table>
        <tr>

            <td onclick="changingPresign()" >±</td>
            <td onclick="Percent()" >%</td>
            <td onclick="squared()" >x²</td>
            <td onclick="appendOperation(' / ')" >÷</td>
            <td id="brackets" onclick="appendOperation('(')" >(</td>
            <td onclick="appendOperation(')')" >)</td>



        </tr>

        <tr>
            <td onclick="appendOperation(7)" >7</td>
            <td onclick="appendOperation(8)" >8</td>
            <td onclick="appendOperation(9)" >9</td>
            <td onclick="appendOperation('*')" >×</td>
            <td onclick="rooting()" >√</td>
            <td onclick="eulerscheZahl()" >e</td> 

        </tr>

        <tr>
            <td onclick="appendOperation(4)" >4</td>
            <td onclick="appendOperation(5)" >5</td>
            <td onclick="appendOperation(6)" >6</td>
            <td onclick="appendOperation('-')" >-</td>
            <td onclick="faculty()" >x!</td>
            <td onclick="anyExponent()" >xʸ</td>
        </tr>

        <tr>
            <td onclick="appendOperation(1)" >1</td>
            <td onclick="appendOperation(2)" >2</td>
            <td onclick="appendOperation(3)" >3</td>
            <td onclick="appendOperation(' ')" > </td>
            <td onclick="deleteContent()" >AC</td>
            <td onclick="Pi()" >π</td>

        </tr>

        <tr>
            <td onclick="appendOperation(0)" colspan="2" >0</td>
            <td onclick="appendOperation('.')" >,</td>
            <td onclick="calculateResult()" id="result" >=</td>
            <td onclick="deleteLast()" id="ac" >CE</td>
            <td onclick="Ans()" class = "changing-button">Ans</td>
        </tr>

    </table>

</body>

</html>

Unfortunately is the function changingPresign() not working. In addition I would gladly check if innerHTML is positive or negative and depending on the result change the pre sign if ± is clicked. I tried some attempts but none of them is working.

CodePudding user response：

It's because of spelling mistake.

This is the function you want to execute

function changingPresing() {

document.getElementById('resultArea').innerHTML = eval(document.getElementById('resultArea').innerHTML* (-1) ) };

But you are calling it wrongly

<td onclick="changingPresign()" >±</td>

Change the spelling

<td onclick="changingPresing()" >±</td>