loading...

How to read, add and clear an input field?

twitter logo ・1 min read

Hello everyone,

I want to read 1 input field.
Like input type="text" id="bedragen" and add this input to an existing var, when enter key is pressed.
It has to read the input type, and add the (numerical) value when the user presses the Enter/Return key.
Then the value needs to be added to the previous inputs.

After pressing return key, the input field needs to be cleared.

I hope you'll can help me.
I have here a little start: https://codesandbox.io/s/test-inzend-19t5r

EDIT: Please not only post the outcome, but also some explanation! Thank you!

twitter logo DISCUSS (8)
markdown guide
 

I tried to make this work on codesandbox, but it was not doing what I expected. Here's just a html file that I think does what you're after...

<body>
        <div id="app"></div>
        <input type="text" id="test" />
        <script>
                let num = 0;

                const node = document.getElementById("test");
                node.addEventListener("keyup", function(event) {
                        if (event.key === "Enter") {
                                document.getElementById("app").innerHTML += node.value

                                node.value = ""
                        }
                });
        </script>
</body>
 

I've copied it to codesandbox, but he doesn't add anything when pressing the Enter-key on Windows 10, Chrome Version 79.0.3945.117 (Official Build) (64-bit)...

I just added console.log(node) for logging the var...
Or do I need to change "node" to an other variable?

I have that also with other keypress scripts...
Is the Enter key a special key that is not recognized or something?

 

I tried to make this work on codesandbox, but it was not doing what I expected.

I don't know why it doesn't work on codesandbox. Copy the contents into a local index.html file and open it in your browser - I'd stop using codesandbox for now.

Okay, will try that now.
I will edit this one with results ;)

EDIT: The code works beautifully!
Thank you very much!

If I have other problems with this "assignment", do I need to make a new thread or just post in this thread?

Technically, you can do whatever you want. But, you'll probably get more responses if you make new threads for specific questions.

@devdrake0 :

And how do I add the first and de second node.value?
So that if I first type 3 and at the second time type 5, it displays 8 instead of 35?

You could do something like this....

Note: This is a quick solution. There's duplication and no error handling, and is only for demonstration purposes :)

<head>
</head>
<body>
        <div id="app">0</div>
        <input type="text" id="test" />
        <script>
                const node = document.getElementById("test");
                node.addEventListener("keyup", function(event) {
                        if (event.key === "Enter") {
                                let current = document.getElementById("app").innerHTML

                                document.getElementById("app").innerHTML = parseInt(current) + parseInt(node.value)

                                node.value = ""
                        }
                });
        </script>
</body>
 

Here the full question that I asked on FB group JAVASCRIPT on the 6th of December 2019: facebook.com/groups/programmershub...

Classic DEV Post from Feb 9

What do you have to Google? Every. Single. Time.

How about you? Any other stories to make me feel better?

Rik de Graaff profile image
26 y.o. now learning to write code in JavaScript.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️