[HTML/CSS/JS] Calculator Keybind Issue

My full code is this…

            function insert(num){
                document.form.textview.value = document.form.textview.value+num
            function equal(){
                var exp = document.form.textview.value;
                    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 = "";    
                margin: 0;
                padding: 0;
                width: 100;
                height: 100;
                font-size: 50;
                margin: 2;
                cursor: pointer;
                background: grey;
                width: 416;
                margin: 5;
                font-size: 50;
                padding: 5;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%)
                background: linear-gradient(to right, red, blue);;
                height: 100%;
        <title>Smart Calculator</title>
            <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">
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>

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.

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

let me try, hang on im updating my pc

nope doesnt work …

Oh works now! thanks

1 Like

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

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


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

Or you can use a simple JS library like Mousetrap.

1 Like

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

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

@EddiesTech yes its fine!

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

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:


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

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.