How to create default tags which show when visitor open this page?

JavaScript
, ,
1

I want to some tags by default witch show up time of open the page. This code normally working fine as add tags but when I trying some tags default such as java, html, php etc then code normally working but no show up default tags. Below is my code, please advice me how to do
JavaScript:

const removeTag = (event) => {
    if (event.target.classList.contains('tag-close')) {
      event.target.parentElement.remove();
    }
  }
 
  const addTag = (event) => {
    if (event.keyCode === 13) {
      const input = document.getElementById('input')
      const tagsContainer = document.querySelector('.tags-container');     
      const value = event.target.value;
      const spanElement = document.createElement('span');
      
 
      spanElement.innerHTML = `
        <span class="tag-text">${value}</span>
        <span class="tag-close"> ⌫ </span>
      `   

      spanElement.classList.add('tag');           
      tagsContainer.appendChild(spanElement);
      input.value = ''; 
      tag = ["coding", "java"];     
    }
  }
  
  window.onload = () => {
    const tagsContainer = document.querySelector('.tags-container');
    tagsContainer.addEventListener('click', removeTag);
  }

Here is the html code:

<div class="container">
    <div class="input-container">
      <input type="text" placeholder="Type in something..." id="input" onkeyup="addTag(event)" />
    </div>
    <div class="tags-container">     
      

    </div>
</div>
2

If you want to have some default tags like “java”, “html”, and “php” show up when the page opens, you will need to modify your window.onload function to create these tag elements and append them to your tags-container element when the page is loaded.

Here’s an updated version of your JavaScript code:

const removeTag = (event) => {
  if (event.target.classList.contains('tag-close')) {
    event.target.parentElement.remove();
  }
}

const addTag = (value) => {
  const tagsContainer = document.querySelector('.tags-container');
  const spanElement = document.createElement('span');

  spanElement.innerHTML = `
    <span class="tag-text">${value}</span>
    <span class="tag-close"> ⌫ </span>
  `;
  
  spanElement.classList.add('tag');
  tagsContainer.appendChild(spanElement);
}

const handleKeyUp = (event) => {
  if (event.keyCode === 13) {
    const input = document.getElementById('input');
    const value = input.value;
    addTag(value);
    input.value = '';
  }
}

window.onload = () => {
  // Adding event listeners
  const tagsContainer = document.querySelector('.tags-container');
  const inputElement = document.getElementById('input');
  tagsContainer.addEventListener('click', removeTag);
  inputElement.addEventListener('keyup', handleKeyUp);

  // Adding default tags
  const defaultTags = ["java", "html", "php"];
  defaultTags.forEach(tag => {
    addTag(tag);
  });
}

And here is the corrected HTML:

<div class="container">
  <div class="input-container">
    <input type="text" placeholder="Type in something..." id="input" />
  </div>
  <div class="tags-container">
    <!-- Default tags will be added here by JavaScript -->
  </div>
</div>

Good luck.

1 Like
3

Thanks for your help :grin:

4

Thanks for your help :grin:
But, I wanted to use this JavaScript code multiple time in the same page, After changing code it not possible.

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

  const removeTag = (event) => {
    if (event.target.classList.contains('tag-close')) {
      event.target.parentElement.remove();
    }
  };

  const addTag = (value) => {
    const spanElement = document.createElement('span');
    spanElement.innerHTML = `
      <span class="tag-text">${value}</span>
      <span class="tag-close">⌫</span>
    `;
    spanElement.classList.add('tag');
    tagsContainer.appendChild(spanElement);
  };

  const handleKeyUp = (event) => {
    if (event.keyCode === 13) {
      const value = inputElement.value.trim();
      if (value) {
        addTag(value);
        inputElement.value = '';
      }
    }
  };

  // Set up the default tags for this container
  const defaultTags = container.dataset.defaultTags ? container.dataset.defaultTags.split(',') : [];
  defaultTags.forEach(tag => {
    addTag(tag);
  });

  // Adding event listeners
  tagsContainer.addEventListener('click', removeTag);
  inputElement.addEventListener('keyup', handleKeyUp);
}

// Set up all tag inputs on the page
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.tag-input-container').forEach(container => {
    setupTagInput(`#${container.id}`);
  });
});

Your HTML would look like this for each tag system instance:

<div id="tag-container-1" class="tag-input-container" data-default-tags="java,html,php">
  <div class="input-container">
    <input type="text" placeholder="Type in something..." class="tag-input" />
  </div>
  <div class="tags-container">
    <!-- Tags will be added here -->
  </div>
</div>

<div id="tag-container-2" class="tag-input-container" data-default-tags="css,javascript,ruby">
  <!-- Similar structure to the above -->
</div>

<!-- Repeat the above structure for as many tag systems as you need on the page -->
6

Thanks a lot, you’re great…

8

I got a problem, The default tags value doesn’t insert into the MySQL database but new tags values inserted and I also want to do press comma instead of hit Enter. Could you please let me know how to solve it. Thanks in advance.

9

Hi @linchet, members are here to assist you, but they are not here to do the work for you FOC.

What have you tried? How are you interacting with the database, Node JS, PHP?

Where is the code you have tried?

Thank you.

Edit. This is now veering off from the original topic, so your question may well need to asked in a new thread.

10

Sorry, I don’t wanted to hard. I just share the problem

1 Like
11

Fair enough :slight_smile:

The default tags value doesn’t insert into the MySQL database but new tags values inserted

At the moment it is not very clear what your problem is, and seeing your code and a bit more information would help members here give you some advice.

12

I created new topic, which I tried

1 Like
13

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