Default tags are not inserted into MySQL server

[m_hutley]

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…

[rpg_digital]

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.

[m_hutley]

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

@linchet

  document.querySelectorAll('.tag-input-container').forEach(container => {
    setupTagInput(`#${container.id}`);

So every input container…

@linchet

inputElement.addEventListener('keyup', handleKeyUp);

is getting a keyup event…

@linchet

  const handleKeyUp = (event) => {
    if (event.keyCode === 13) {

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.

[rpg_digital]

@m_hutley

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

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.

[m_hutley]

@rpg_digital

There for we are getting entirely new handler functions for each container.

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.)

[rpg_digital]

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.

[m_hutley]

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.