Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

I am trying to set the placeholder attribute after button is clicked

const textInput = document.querySelector("#textInput");
const addItem = document.querySelector("#addItem");
const uList = document.getElementsByTagName('ul')[0];
addItem.addEventListener('click', () => {
    let newLiItem = document.createElement('li');
    newLiItem.textContent = textInput.value;
    uList.appendChild(newLiItem);
    textInput.setAttribute('placeholder', "type text to add");
});

Everything works fine until I try to set the search box placeholder when then the button is clicked. In the console, I do see that the value gets changed, but the browser still shows the recent item that was typed (even though 'cache' is disabled in the Network tab in the console).

2 Answers

Hello Shyam ,

Can you try to set placeholder with this code.

   textInput.placeholder = "type text to add";

Thank you

nico dev
nico dev
20,364 Points

Hi Shyam Gupta,

Just wanted to say that your line there is fine, but placeholder only comes into play when the value is empty.

That is, you can do it that way but, before the setAttribute line, you should include this one:

textInput.value = '';

that, let's say it this way, is resetting the value of the input field. Hope that helps! :)