Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Lundy
13,269 PointsNeed help with password book in JS.
I'm building a password book in JavaScript. When you click add account, it will add the account that you wrote the title for. When clicking edit, you should be able to edit the password for that account. This works if you only have one account listed. But when you create another account, and try to edit that password, it ends up editing the content inside the 'edit' button. I am clueless as to why this happens as to my understanding it should act the same way no matter how many accounts there are.
I'm targeting the 'list-item' as the parent for each item. On line 41, the 'parent' variable is set to the h2 that says 'Password: ' and child is what will become the actual password. I've been stuck for about a week, and need some help!
Thank you in advance!
Here is my code: https://github.com/andrewlundy/password-book/tree/working
2 Answers
tomd
16,701 PointsOkay, i cleaned the code up a bit, it works now. The accounts work as they should and the buttons are independent. I'd suggest renaming some of the variables to be more meaningful. Here you go:
const addAccountBtn = document.getElementById('add-account');
const mainContent = document.getElementById('main-content');
const accountName = document.getElementById('account-name');
function addAccount() {
const passwordHeading = document.createElement('span');
const heading = document.createElement('h3');
const div = document.createElement('div');
const passwordContainer = document.createElement('span');;
div.className = 'list-item';
passwordHeading.textContent = 'Password: ';
passwordHeading.className = 'password';
heading.textContent = 'Account: ' + accountName.value;
// Clear input
accountName.value = '';
// Create button
const edit = document.createElement('button');
edit.textContent = 'Edit';
edit.classList.add('edit-button');
// Append elements
passwordHeading.appendChild(passwordContainer);
div.appendChild(heading);
div.appendChild(passwordHeading);
div.appendChild(edit);
mainContent.appendChild(div);
}
addAccountBtn.addEventListener('click', addAccount);
mainContent.addEventListener('click', (e) => {
const button = e.target;
const pass = button.previousElementSibling;
if (button.classList.contains('edit-button')) {
const input = document.createElement('input');
const span = button.previousElementSibling.firstElementChild;
input.value = span.textContent;
pass.insertBefore(input, span);
pass.removeChild(span);
button.textContent = "Save";
button.classList = 'save-button';
} else if (button.classList.contains('save-button')) {
const span = document.createElement('span');
const input = button.previousElementSibling.firstElementChild;
span.textContent = input.value;
pass.insertBefore(span, input);
pass.removeChild(input);
button.textContent = 'Edit';
button.classList = 'edit-button';
}
});
tomd
16,701 PointsHello again Andrew, I helped you last time. I'm working on a fix right now, i'll reply again soon.
Andrew Lundy
13,269 PointsThank you again Tom. I was able to finally sit down and read through the entire code, and it makes sense! Had to look some stuff up, but after reading docs and going over it - it all clicked. Thank you very much my friend.
tomd
16,701 PointsYour Welcome, let me know if you need any help again.