0

I am new at coding and my new project is to code an calculator with JavaScript, HTML and CSS. So, when I name the function in HTML part and JavaScript part which is in this code named as "clearA()" to "clear()" the function is not working. But clearA(), the function with an capital letter is working, why? It is confusing because other functions without capital letters are working.

<!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 clearA() {
    document.getElementById('resultArea').innerHTML = '';
    

    
}

function calculatingDecimal(operation) {
   let calculation= document.getElementById('resultArea').innerHTML += operation;
    eval(calculation);
}
</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="clearA()" 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>
VLAZ
  • 26,331
  • 9
  • 49
  • 67
65 sami
  • 15
  • 5
  • 1
    Because clear() is reserved for a function from JavaScript itself: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear – Roy Jul 02 '22 at 15:25
  • But `clear` is a method of `Set`. This is also valid: `var clear=12` – IT goldman Jul 02 '22 at 15:26
  • 1
    If you want to rename the function from "clearA()" to "clear()", you have to change the following statement from `AC` to `AC` – The KNVB Jul 02 '22 at 15:28
  • I did what you said previously but it did not work. – 65 sami Jul 02 '22 at 15:29
  • First, you need to press F12 to show the console and then click the button to check if any error message would come out. – The KNVB Jul 02 '22 at 15:31
  • @Roy you're right, but it will be calling [`document.clear()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/clear), not set.clear() – Rory McCrossan Jul 02 '22 at 15:31
  • 1
    It's not the capital letter; it's anything that makes the name different from "clear". The problem has to do with using inline `onclick` attributes, because of the somewhat weird way that the event handler function is constructed from the attribute values. – Pointy Jul 02 '22 at 15:33
  • @RoryMcCrossan yes, you're right. – The KNVB Jul 02 '22 at 15:33
  • 1
    @65sami be aware your code is using 2 bad practices here, `onclick` and `eval`. Neither should be used. Use [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead of `onclick` and [this approach to build a calculator](https://stackoverflow.com/questions/32292231/how-to-code-a-calculator-in-javascript-without-eval) instead of `eval()`. – Rory McCrossan Jul 02 '22 at 15:33
  • thank you, I´ll adjust my code accordingly – 65 sami Jul 02 '22 at 15:38
  • @RoryMcCrossan You are absolutely right! – Roy Jul 02 '22 at 19:08

0 Answers0