[HTML/CSS/JS] Calculator Keybind Issue

Coding Help
, ,
1

My full code is this…

<html>
    <head>
        <script>
            function insert(num){
                document.form.textview.value = document.form.textview.value+num
            }
            function equal(){
                var exp = document.form.textview.value;
                if(exp){
                    document.form.textview.value = eval(exp)
                }
            }
            function c(){
                
                document.form.textview.value = "";
            }
            function back(){
                var exp = document.form.textview.value;
                document.form.textview.value = exp.substring(0,exp.length-1);
            }
            function c() {
                  if(event.key === 'c') {
                   document.form.textview.value = "";    
                }
            }
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .button{
                width: 100;
                height: 100;
                font-size: 50;
                margin: 2;
                cursor: pointer;
                background: grey;
            }
            .textview{
                width: 416;
                margin: 5;
                font-size: 50;
                padding: 5;
            }
            .main{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%)
            }
            .bg{
                background: linear-gradient(to right, red, blue);;
                height: 100%;
            }
        </style>
        <title>Smart Calculator</title>
    </head>
    <body>
            <marquee>If you are trying to enter another equation once you already done a different equation, make sure to clear first.</marquee>
       <div class="bg"></div>
        <div class="main" name="main">
            <form name = "form">
                <input class="textview" name="textview">
            </form>
            <table>
                <tr>
                    <td><input class="button" type="button" value = "C" onclick="c()"></td>
                    <td><input class="button" type="button" value = "<" onclick="back()"></td>
                    <td><input class="button" type="button" value = "÷" onclick="insert('/')"></td>
                    <td><input class="button" type="button" value = "x" onclick="insert('*')"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value = "7" onclick="insert(7)"></td>
                    <td><input class="button" type="button" value = "8" onclick="insert(8)"></td>
                    <td><input class="button" type="button" value = "9" onclick="insert(9)"></td>
                    <td><input class="button" type="button" value = "-" onclick="insert('-')"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value = "4" onclick="insert(4)"></td>
                    <td><input class="button" type="button" value = "5" onclick="insert(5)"></td>
                    <td><input class="button" type="button" value = "6" onclick="insert(6)"></td>
                    <td><input class="button" type="button" value = "+" onclick="insert('+')"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value = "1" onclick="insert(1)"></td>
                    <td><input class="button" type="button" value = "2" onclick="insert(2)"></td>
                    <td><input class="button" type="button" value = "3" onclick="insert(3)"></td>
                    <td rowspan=5><input class="button" type="button" style="height:205" value = "=" onclick="equal()"></td>
                <tr>
                    <td colspan=2><input class="button" style="width:205" type="button" value = "0" onclick="insert(0)"></td>
                    <td><input class="button" type="button" value = "." onclick="insert('.')"></td>
                </tr>
            </table>
            </div>
    </body>
</html>

What I am trying to do is if I press the key c, it clears the textview.value. Currently only a button does it, but I want to make it so the key does it too.

2

Could you use something like this:

function getKey(e)
{
if(e.keyCode == "67"){ //67 is the 'c' key
document.form.textview.value = ""; 
}
}

document.onkeyup = getKey;
1 Like
3

let me try, hang on im updating my pc

4

nope doesnt work …

5

Oh works now! thanks

1 Like
6

Please mark my answer as a solution so others can find it if they have a similar problem or want to help :slight_smile:

7

Oh, no no no!

event.keyCode and event.which are deprecated now. Now, there is a property called event.code in JavaScript.

Try out one example

3 Likes
8

Sorry. I just did a quick Google - @ZinX would recommend changing that ASAP :slight_smile:

9

Or you can use a simple JS library like Mousetrap.

1 Like
10

oh cool lol. sorry for late message, i dont usually check this web :joy: lol

11

however, that’d just use nodejs. it’d be better, for me & imo, to just use plainjs.

12

@EddiesTech yes its fine!

13

Mousetrap is not a NodeJS library, it’s a client side library.

14

I remember messing around with mousetrap, it gave me a lot of headaches when working on an Electron app. God do I never want to touch that library ever again :joy:

3 Likes
15

Oh I see why, the example uses the key command and not everyone uses a mac. Also keydown gets fired repeatdly if the key is held down

16

You could just check whether or not the key has been lifted by using keyUp event to determine whether the keyDown event should be repeated.