Why My JS Calculator Clear button isn't working?

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>

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

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

1 Like

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

1 Like

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>

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.

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

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

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.