Cannot either apply Math.pow() to document.getElementById(x).innerHTML nor assign document.getElementById(x).innerHTML to a var

Question

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()" class="changing-button">±</td>
    <td onclick="calculatingDecimal('/ 100')"class="changing-button">%</td>
    **<td onclick="squared()" class="changing-button">x²</td>**
    <td onclick="appendOperation(' / ')" class="operation-button">/</td>
   </tr>
   <tr>
    <td class="numbers" onclick="appendOperation(7)">7</td>
    <td class="numbers" onclick="appendOperation(8)">8</td>
    <td class="numbers" onclick="appendOperation(9)">9</td>
    <td onclick="appendOperation('*')" class="operation-button" >×</td>
   </tr>
   <tr>
    <td  class="numbers" onclick="appendOperation(4)" >4</td>
    <td  class="numbers" onclick="appendOperation(5)" >5</td>
    <td  class="numbers" onclick="appendOperation(6)" >6</td>
    <td  onclick="appendOperation('-')" class="operation-button" >-</td>
   </tr>
   <tr>
    <td class="numbers" onclick="appendOperation(1)" >1</td>
    <td class="numbers" onclick="appendOperation(2)" >2</td>
    <td class="numbers" onclick="appendOperation(3)" >3</td>
    <td  onclick="appendOperation('+')" class="operation-button" >+</td>
    <td onclick="deleteContent()" class="changing-button">AC</td>
   </tr>
   <tr>
    <td class="numbers"  onclick="appendOperation(0)" colspan="2">0</td>
    <td onclick="appendOperation('.')">,</td>
    
   
    <td class="operation-button" onclick="calculateResult()" id="result">=</td>
    <td id="ac" onclick= "deleteLast()" class="changing-button">CE</td>

   </tr>

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

_"What I am doing wrong?"_ - This is not a [mcve]. None of the styling is necessary for this question. We also don't need the complete "calculator". — Andreas, Jul 04 '22 at 12:34
You cannot "highlight" code with `**` to make it **bold**. If you really need to "highlight" something use a comment (but in that case you might want to have another look at the example if it is really a [mcve]) — Andreas, Jul 04 '22 at 12:36
There are only some specific cases were `eval()` can be useful. Calling it with the result of `Math.pow()` is not one of them. `var x = ...` is executed before there's any DOM to read `.innerHTML` from, hence this should already throw an error. Also [`Math.pow()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow) expects _two_ numbers (the first argument is implicitly cast into a number), and not a string. — Andreas, Jul 04 '22 at 12:39
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — evolutionxbox, Jul 04 '22 at 12:40

score -1 · Accepted Answer · answered Jul 04 '22 at 12:42

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()" class="changing-button">±</td>
    <td onclick="calculatingDecimal('/ 100')"class="changing-button">%</td>
    **<td onclick="squared()" class="changing-button">x²</td>**
    <td onclick="appendOperation(' / ')" class="operation-button">/</td>
   </tr>
   <tr>
    <td class="numbers" onclick="appendOperation(7)">7</td>
    <td class="numbers" onclick="appendOperation(8)">8</td>
    <td class="numbers" onclick="appendOperation(9)">9</td>
    <td onclick="appendOperation('*')" class="operation-button" >×</td>
   </tr>
   <tr>
    <td  class="numbers" onclick="appendOperation(4)" >4</td>
    <td  class="numbers" onclick="appendOperation(5)" >5</td>
    <td  class="numbers" onclick="appendOperation(6)" >6</td>
    <td  onclick="appendOperation('-')" class="operation-button" >-</td>
   </tr>
   <tr>
    <td class="numbers" onclick="appendOperation(1)" >1</td>
    <td class="numbers" onclick="appendOperation(2)" >2</td>
    <td class="numbers" onclick="appendOperation(3)" >3</td>
    <td  onclick="appendOperation('+')" class="operation-button" >+</td>
    <td onclick="deleteContent()" class="changing-button">AC</td>
   </tr>
   <tr>
    <td class="numbers"  onclick="appendOperation(0)" colspan="2">0</td>
    <td onclick="appendOperation('.')">,</td>
    
   
    <td class="operation-button" onclick="calculateResult()" id="result">=</td>
    <td id="ac" onclick= "deleteLast()" class="changing-button">CE</td>

   </tr>

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

So first, thank you! But I do not understand why I have to insert parseINT — madara030, Jul 04 '22 at 13:11
@madara030 Maybe you do not need to add parseInt, I have added it just to make sure that the value I got from user input should be an integer type. — Suraj Sanwal, Jul 07 '22 at 10:52
@madara030, Your failure I have already added that the pow() method accepts 2 parameters the base value and its exponent, and only one is passed and the exponent was missing in your code. — Suraj Sanwal, Jul 07 '22 at 10:55

Cannot either apply Math.pow() to document.getElementById(x).innerHTML nor assign document.getElementById(x).innerHTML to a var

1 Answers1