Unable to change input field text content with javascript

I'm trying to change the text inside an input field to username. The id for the field is is_username.

And in my Javascript file I've tried

document.getElementById("id_username").innerHTML = "Username";

document.getElementById("id_username").value = "Username";

document.querySelector(".id_username").textContent = "Username";

None are working... This site runs on django. I know with html you can use placeholder to achieve this but these fields are created using django tags.

Any ideas?

I did try using these methods on a normal html input field and also had no luck.

Would like to point out that when you tried your queryselector. You used ".id_username", this selects a class that is called that, not the id.

You can try to store the selected element in a variable then, run the innerHTML/textcontent.

const stubbornInput = document.getElementById("id_username");

stubbornInput.innerHTML = 'Whatever you want';

Ive had cases where this worked but, going straight for the thing didnt. Not sure if it helps or why it worked for me before but, worth a shot :)

You can try with this:

document.querySelector('input[name="id_username"]').value = 'Username';
<input type="text" name="id_username" id="id_username" placeholder="Your text">

your text input has the ID username, in your javascript it says id_username try this input and the javascript.

document.getElementById("username").value = "your_value_here";
<input type="text" name="username" id="username">

If that doesn't work, try using JQuery.


ok below is the correct answer:

my main js file was causing an issue which is why it didn't work for me earlier. After i created a empty js file for this purpose it worked.

document.querySelector('#id_username').value = 'username' ;
document.querySelector('#id_username').addEventListener('click', function () {
  document.querySelector('#id_username').value = '';

Found an easier was to do this:

document.querySelector('#id_username').setAttribute('placeholder', 'Username');

Back to Top