Cannot either apply Math.pow() to document.getElementById(x).innerHTML nor assign document.getElemen-CodePudding

I am new at coding and my new project is it to code a calculator. Currently I am in work to code a function named as "squared()" to use the x² button in my calculator. Unfortunately the calculator shows NaN by pressing the x² button. I tried different ways to solve this problem, but none of my attempts solved my problem. In addition I cannot assign document.getElementById('resultArea').innerHTML to the var x (see in code below). What I am doing wrong?

<!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 = eval(container.innerHTML);
    container.innerHTML = 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 calculatingDecimal(operation) {
   let calculation= document.getElementById('resultArea').innerHTML  = operation;
    eval(calculation);
}

**var x = document.getElementById('resultArea').innerHTML;**

**function squared() {
    document.getElementById("resultArea").innerHTML = eval(Math.pow(document.getElementById('resultArea').innerHTML));
} **


        </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;
}
</style>

<body>

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

<table>
   <tr>
  
    <td onclick="changingPresign()" >±</td>
    <td onclick="calculatingDecimal('/ 100')">%</td>
    **<td onclick="squared()" >x²</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>
   </tr>
   <tr>
    <td   onclick="appendOperation(4)" >4</td>
    <td   onclick="appendOperation(5)" >5</td>
    <td   onclick="appendOperation(6)" >6</td>
    <td  onclick="appendOperation('-')"  >-</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>
   </tr>
   <tr>
    <td   onclick="appendOperation(0)" colspan="2">0</td>
    <td onclick="appendOperation('.')">,</td>
    
   
    <td  onclick="calculateResult()" id="result">=</td>
    <td id="ac" onclick= "deleteLast()" >CE</td>

   </tr>

</table>
    
</body>
</html>

CodePudding user response：

Look at the JS file below you have to assign the power value in the pow() method of the Math object. The correct syntax for pow() method is pow(a, b).

I made the below change in your code:

function squared() {
    document.getElementById("resultArea").innerHTML = eval((Math.pow(parseInt(document.getElementById('resultArea').innerHTML), 2));
}

function appendOperation(operation) {
    document.getElementById("resultArea").innerHTML  =operation;
}

function calculateResult() {
    let container = document.getElementById('resultArea');
    let result = eval(container.innerHTML);
    container.innerHTML = 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 calculatingDecimal(operation) {
   let calculation= document.getElementById('resultArea').innerHTML  = operation;
    eval(calculation);
}

var x = document.getElementById('resultArea').innerHTML;

function squared() {
    document.getElementById("resultArea").innerHTML = eval(Math.pow(parseInt(document.getElementById('resultArea').innerHTML), 2)); // Look at this line only
}

<!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">
</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;
}
</style>

<body>

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

<table>
   <tr>
  
    <td onclick="changingPresign()" >±</td>
    <td onclick="calculatingDecimal('/ 100')">%</td>
    **<td onclick="squared()" >x²</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>
   </tr>
   <tr>
    <td   onclick="appendOperation(4)" >4</td>
    <td   onclick="appendOperation(5)" >5</td>
    <td   onclick="appendOperation(6)" >6</td>
    <td  onclick="appendOperation('-')"  >-</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>
   </tr>
   <tr>
    <td   onclick="appendOperation(0)" colspan="2">0</td>
    <td onclick="appendOperation('.')">,</td>
    
   
    <td  onclick="calculateResult()" id="result">=</td>
    <td id="ac" onclick= "deleteLast()" >CE</td>

   </tr>

</table>
    
</body>
</html>