Rik de Graaff

Posted on Jan 24, 2020

How to read, add and clear an input field?

#javascript #beginners #help

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!

Top comments (8)

Si • Jan 24 '20

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>

Rik de Graaff • Jan 24 '20

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?

Si • Jan 24 '20

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.

Rik de Graaff • Jan 24 '20 • Edited

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?

Si • Jan 24 '20

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

Rik de Graaff • Jan 24 '20 • Edited

@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?

Si • Jan 24 '20 • Edited

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>

Rik de Graaff • Jan 24 '20

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

DEV Community

How to read, add and clear an input field?

Top comments (8)

Read next

JavaScript - A Blessing or a Curse?

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

How are responsive websites doing in 2024?

New Voice Command System Tackles Variable-Length Speech for Improved Live Transcription