Why My JS Calculator Clear button isn't working?

JavaScript
1

I’m doind a calc in JS but my C (clear button) don’t work?

<!DOCtYPE html>
<html>

<head>
    <title>Calculadora em JS</title>
    <link rel="stylesheet" type="text/css" href="Calc.css">
</head>

<body>
    <form id="calc">
        <input name="numero1" type="text" id="num1">
    </form>

    <div id="calculator">
        <input name="num" type="button" value="1" onclick="display('1')">
        <input name="num" type="button" value="2" onclick="display('2')">
        <input name="num" type="button" value="3" onclick="display('2')">
        <input name="num" type="button" value="5" onclick="display('3')">
        <input name="num" type="button" value="3" onclick="display('4')">
        <input name="num" type="button" value="4" onclick="display('5')">
        <input name="num" type="button" value="6" onclick="display('6')">
        <input name="num" type="button" value="7" onclick="display('7')">
        <input name="num" type="button" value="8" onclick="display('8')">
        <input name="num" type="button" value="9" onclick="display('9')">
        <input name="num" type="button" value="0" onclick="display('0')">

        <input name="operacao" class="op" type="button" value="+" onclick="display('+')">
        <input name="operacao" class="op" type="button" value="-" onclick="display('-')">
        <input name="operacao" class="op" type="button" value="*" onclick="display('*')">
        <input name="operacao" class="op" type="button" value="/" onclick="display('/')">
        <input name="operacao" class="op" type="button" value="%" onclick="display('%')">

        <input name="resultado" type="button" onclick="foo()" value="Calcular">
        <input name="resultado" type="button" onclick="clear()" value="C">

    </div>
    <div id="res_div">
        <p id="res" style=" color:beige;">Resultado</p>
    </div>
</body>
<script>

    function display(p) {
        document.getElementById('num1').value += p
    }

    function foo() {

        var num1 = document.getElementById('num1').value;
        console.log(num1);

        var enum1 = eval(num1);

        console.log(enum1);

        document.getElementById('num1').value = enum1;
    }
    function clear(){
         document.getElementById('calc').reset();
    }
</script>

</html>
2

Try using a different name for clear. Perhaps clearCalc? Not sure what it going on with clear but as soon as I changed it to something else it worked.

1 Like
3

I think it’s got something to do with the old document.clear() method hiding the user-defined function for some reason

1 Like
4

Maybe this is the reason? Not sure honestly.

2 Likes
5

Thanks for the info @vinyl704 and @RandellDawson. Had no idea such a method existed at one time.

1 Like
6

I guess it did’t work. I took the unecessary divs and add a form instead made the change in the ID but still not working

<!DOCtYPE html>
<html>

<head>
    <title>Calculadora em JS</title>
    <link rel="stylesheet" type="text/css" href="Calc.css">
</head>

<body>
    <form id="calc">
        <input name="numero1" type="text" id="num1">

        <input name="num" type="button" value="1" onclick="display('1')">
        <input name="num" type="button" value="2" onclick="display('2')">
        <input name="num" type="button" value="3" onclick="display('2')">
        <input name="num" type="button" value="5" onclick="display('3')">
        <input name="num" type="button" value="3" onclick="display('4')">
        <input name="num" type="button" value="4" onclick="display('5')">
        <input name="num" type="button" value="6" onclick="display('6')">
        <input name="num" type="button" value="7" onclick="display('7')">
        <input name="num" type="button" value="8" onclick="display('8')">
        <input name="num" type="button" value="9" onclick="display('9')">
        <input name="num" type="button" value="0" onclick="display('0')">

        <input name="operacao" class="op" type="button" value="+" onclick="display('+')">
        <input name="operacao" class="op" type="button" value="-" onclick="display('-')">
        <input name="operacao" class="op" type="button" value="*" onclick="display('*')">
        <input name="operacao" class="op" type="button" value="/" onclick="display('/')">
        <input name="operacao" class="op" type="button" value="%" onclick="display('%')">

        <input name="resultado" type="button" onclick="foo()" value="Calcular">
        <input name="resultado" type="button" onclick="clearCalc()" value="C">

        <div id="res_div">
            <p id="res" style=" color:beige;">Resultado</p>
        </div>
    </form>
</body>
<script>

    function display(p) {
        document.getElementById('num1').value += p
    }

    function foo() {

        var num1 = document.getElementById('num1').value;
        console.log(num1);

        var enum1 = eval(num1);

        console.log(enum1);

        document.getElementById('num1').value = enum1;
    }
    function clearCalc(){
         document.getElementById('calc').reset();
    }
</script>

</html>
7

Would you be a little more specific about what is not working now?

Also, I just noticed that the values on your number buttons don’t quite make sense.

8

Yes, I forgot to delete them.

I’m trying to call clearCalc() fuction by clicking on the C button.

This fuction should look for form id and reset the values in the form. This because I want to clear the input were my solutions are shown

9

I just tested the most recent code you pasted in here (using clearCalc) and the clear button works for me. Are you getting any errors in the console?

1 Like
10

Thank you! I tried out in codepen and worked too. I guess the code didn’t run well in VS Code because the folder where it was save.