Discussion on: How to read, add and clear an input field?

View post

Replies for: 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)...

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>