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
11 Replies
vince
vinceā€¢2y ago
Daily reminder to not use var, use let or const. Doesn't answer your question but will help your code quality
artus
artusā€¢2y ago
ty, i forgot and fixed this issue so dont need help anymore ā¤ļø
vince
vinceā€¢2y ago
Nice! Do you mind posting your solution so it may help others in the future?
Jochem
Jochemā€¢2y 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
artusā€¢2y 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
Jochemā€¢2y ago
yeah, please don't delete posts, they're here so everyone can learn šŸ™‚ thanks for adding your solution!
artus
artusā€¢2y 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
Chris Bolsonā€¢2y 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
vinceā€¢2y ago
You saved me with this codepen šŸ˜… I did not know about that
artus
artusā€¢2y ago
sorry that i didnt post solution before
vince
vinceā€¢2y ago
all good!
Want results from more Discord servers?
Add your server