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

View post

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>