Kevin Powell - Community•12mo ago

Adding items to div with title that user can change anytime by clicking on it

Hello i wrote a code that create a new item in card and set its name to Default Task Name but i want to add function that allow user to change it anytime when he click on title. The problem is that user cant edit existing titles but only new created, and i want to make it more simple so when user click button to add it auto focus on title so he can change title before he create a card. I hope I explained it well

message.txt

11 Replies

vince•12mo ago

Daily reminder to not use var, use let or const. Doesn't answer your question but will help your code quality

artus•12mo ago

ty, i forgot and fixed this issue so dont need help anymore ❤️

vince•12mo ago

Nice! Do you mind posting your solution so it may help others in the future?

Jochem•12mo ago

@artusss0 please do post the solution if you can, and mark the post as solved when you have (just add the solved tag)

artus•12mo ago

ohhh ok, i was just closing them ill post solution in a moment

<div class="cards">
  <div class="item" onclick="editTitle(this)">
    <div class="card-title"> Card1 Test </div>
      <div class="hiden-card-info">
        <h4> Info </h4>
        <p> Added: 07.06.2023 </p>
        <p> Author: Jack </p>
      </div>
    </div>
  <div class="item" onclick="editTitle(this)">
    <div class="card-title"> Card2 </div>
    <div class="hiden-card-info"> clean your teeth </div>
  </div>
</div>

<div class="cards">
  <div class="item" onclick="editTitle(this)">
    <div class="card-title"> Card1 Test </div>
      <div class="hiden-card-info">
        <h4> Info </h4>
        <p> Added: 07.06.2023 </p>
        <p> Author: Jack </p>
      </div>
    </div>
  <div class="item" onclick="editTitle(this)">
    <div class="card-title"> Card2 </div>
    <div class="hiden-card-info"> clean your teeth </div>
  </div>
</div>

I added onclick="editTitle(this)" to every item do it triggers function to edit title witch param equals to this element, then

function editTitle(cardElement) {
  var cardTitle = cardElement.querySelector('.card-title');
  var input = document.createElement('input');
  input.type = 'text';
  input.value = cardTitle.textContent;
  
  var saveChanges = function() {
    cardTitle.textContent = input.value;
    cardElement.replaceChild(cardTitle, input);
  };
  
  input.addEventListener('blur', saveChanges);
  input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      saveChanges();
  }
  });
  
  cardElement.replaceChild(input, cardTitle);
  input.focus();
}

function editTitle(cardElement) {
  var cardTitle = cardElement.querySelector('.card-title');
  var input = document.createElement('input');
  input.type = 'text';
  input.value = cardTitle.textContent;
  
  var saveChanges = function() {
    cardTitle.textContent = input.value;
    cardElement.replaceChild(cardTitle, input);
  };
  
  input.addEventListener('blur', saveChanges);
  input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      saveChanges();
  }
  });
  
  cardElement.replaceChild(input, cardTitle);
  input.focus();
}

on click javascript gets this element and replace with input, when someone click enter or focus on smth other function will execute saveChanges() and again replace input with normal text we can also add if (input.value.trim() !== '') to check if input is not empty so user cant delete title i still didnt figure out how to trigger editTtile() just after creating new card but when i do ill add soultion

Jochem•12mo ago

yeah, please don't delete posts, they're here so everyone can learn 🙂 thanks for adding your solution!

artus•12mo ago

function addTask(boardId) {
  var board = document.getElementById(boardId);
  var cardsSection = board.querySelector('.section.color-new .cards');
  
  var newItem = document.createElement('div');
  newItem.classList.add('item');
  newItem.setAttribute('onclick', 'editTitle(this)');
  newItem.innerHTML = `
    <div class="card-title"> Deafult Task Name </div>
    <div class="hiden-card-info">
      <h4> Informations </h4>
      <p> Added: Today </p>
      <p> Author: Unknown </p>
    </div>
  `;
  cardsSection.appendChild(newItem);
  editTitle(newItem);
};

function addTask(boardId) {
  var board = document.getElementById(boardId);
  var cardsSection = board.querySelector('.section.color-new .cards');
  
  var newItem = document.createElement('div');
  newItem.classList.add('item');
  newItem.setAttribute('onclick', 'editTitle(this)');
  newItem.innerHTML = `
    <div class="card-title"> Deafult Task Name </div>
    <div class="hiden-card-info">
      <h4> Informations </h4>
      <p> Added: Today </p>
      <p> Author: Unknown </p>
    </div>
  `;
  cardsSection.appendChild(newItem);
  editTitle(newItem);
};

just added editTitle(newItem) to trigger function and it works fine now everythink is working correctly as it should ❤️ ye my bad sorry for that

Chris Bolson•12mo ago

Just for reference, this could also be achieved using the built-in html attribute contenteditable="true" without the need to convert the element to an input field.

vince•12mo ago

You saved me with this codepen 😅 I did not know about that

artus•12mo ago

sorry that i didnt post solution before

vince•12mo ago

all good!

Gaming

Programming

Adding items to div with title that user can change anytime by clicking on it