JavaScript How to add some tags by default

[knowledgefaculty]

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

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);
  }

I can't do it when I trying. I added it like tag = ["coding", "java"]; but no result I got. How to include by some tags default? I am not much experience in the field. I will be grateful if anybody help me.

 

[Johna]

I'm guessing a "tag" is just a class you're giving an element? Also what do you mean by default tags?

 

[knowledgefaculty]

I'm guessing a "tag" is just a class you're giving an element? Also what do you mean by default tags?

I'm guessing a "tag" is just a class you're giving an element? Also what do you mean by default tags?

I just want to set some tag value which a visitor will see it before he add his tags, Thanks for reply

 

[Johna]

So you mean something like this?

<span class="tag1"></span>

And then the classes tag2 and tag3 can be added optionally using javascript?

 

[knowledgefaculty]

So you mean something like this?

<span class="tag1"></span>

And then the classes tag2 and tag3 can be added optionally using javascript?

Yes, right. Could you please let me know how can I do it?

 

[Johna]

Something like this:

<!-- tags. tag1 is the default tag -->
<span id="tags" class="tag1"></span>

<!-- buttons to add tags -->
<button onclick="addTag('tag2')">Add tag2</button>
<button onclick="addTag('tag3')">Add tag3</button>
<button onclick="addTag('tag4')">Add tag4</button>

function addTag(tag) {
  document.querySelector("#tags").classList.add(tag);
}

 

[knowledgefaculty]

Something like this:

<!-- tags. tag1 is the default tag -->
<span id="tags" class="tag1"></span>

<!-- buttons to add tags -->
<button onclick="addTag('tag2')">Add tag2</button>
<button onclick="addTag('tag3')">Add tag3</button>
<button onclick="addTag('tag4')">Add tag4</button>

function addTag(tag) {
  document.querySelector("#tags").classList.add(tag);
}

Thanks for reply, its show as tags but its not removeable. I want if user wants to remove then it will be remove.

 

[Antero360]

Thanks for reply, its show as tags but its not removeable. I want if user wants to remove then it will be remove.

What you could do, is create a function that check if the class is present, if so remove it, otherwise add it. Then in your event handling, you call that function:

function toggleClass(){
    //grab buttons
    if button.contains class
        remove class
    else
        add class 
}

 

[knowledgefaculty]

What you could do, is create a function that check if the class is present, if so remove it, otherwise add it. Then in your event handling, you call that function:

function toggleClass(){
    //grab buttons
    if button.contains class
        remove class
    else
        add class
}

Sorry not work, below is my 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>

 

[Antero360]

Sorry not work, below is my 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>

That is because I pseudo coded it. I am giving you the logic of how it would be, ot is your responsibility as the coder, as the creator, to attempt to write the code for it, based on the logic.