Default tags are not inserted into MySQL server

I mean, it doesnt make sense, because the OP is tagging the script to multple containers all bound to a single keypress event, but… sure. Probably the least of the worries about this…

As you have said we need to see the HTML, the form in it’s entirety. Maybe also get a better of idea of what the goal is. As is often the case, we are seeing a letter box view of the problem.

1 Like

I mean, yes. But the Javascript problem is a standalone one.

So every input container…

is getting a keyup event…

all listening for the same key button…

So if i press Enter, I’m adding a tag to…every container… at the same time…

Can we see why that’s going to be a problem regardless of the HTML structure?

EDIT: The trimming will help… a bit. But it’s still a problem that you’re going to end up assigning tags when you didnt mean to.

Maybe I am being a bit slow, but no I don’t think that is the case. setupTagInput is invoked for each container, passing in the unique id. Therefor we are getting entirely new handler functions for each container.

function setupTagInput(containerSelector) {
  const container = document.querySelector(containerSelector);
  const inputElement = container.querySelector('.tag-input');

I wasn’t really a fan of this duplication and did want the same functions to be referenced. I did do a bit of a refactor of his code, just as an exercise here. In my example addTag takes an element and a tagName rather than an event object.

You are, but creating a new handler doesnt remove the other handlers.

The script will tell:

Main Thread: container 1, Listen for an Enter press.
container1: “Okay boss.”
Main Thread: container 2, Listen for an Enter press.
container2: “Okay boss.”

Enter is pressed

container1: “I hear enter, Go!”
container2: “I hear enter, Go!”
(even better for other scripts in the future: you cant guarantee that container1 goes first.)

Have you tried the codepen I just posted? Type in the inputs and hit enter.

I am sorry I am possibly being a bit dense, it’s getting late here. Will give your comments a re-read.

Oh, no, you’re right. I’m the one misreading.

I’m used to seeing a short addEventListener declaration and assuming its document.… this script is specifically sub-binding to the input element.

Normally you’d see a document.getElement.....addEventListener, so its a longer declaration.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.