Unable to change input field text content with javascript-CodePudding

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.

htmlpage:

{% extends 'display_words.html' %}

{% block content %}
<div >
  <div >
      <div >
            <!-- <p>Please login to see this page.</p> -->
          {% if form.errors %}
            <p>Your username and password didn't match. Please try again.</p>
          {% endif %}

          {% if next %}
            {% if user.is_authenticated %}
              <p>Your account doesn't have access to this page. To proceed,
              please login with an account that has access.</p>
            {% else %}
              <p>Please login to see this page.</p>
            {% endif %}
          {% endif %}

          <form method="post" action="{% url 'login' %}">
            {% csrf_token %}
            <table>
              <tr>
                <!-- <td>{{ form.username.label_tag }}</td> -->
                <td>{{ form.username }}</td>
              </tr>
              <tr>
                <!-- <td>{{ form.password.label_tag }}</td> -->
                <td>{{ form.password }}</td>
              </tr>
            </table>
            <input id="login-button"  type="submit" value="login">
            <input type="hidden" name="next" value="{{ next }}">
          </form>

          {# Assumes you setup the password_reset view in your URLconf #}
          <p id="lost-password-link"><a href="{% url 'password_reset' %}">Lost password?</a></p>
        </div>  
      </div>
  </div>
{% endblock %}

I created a test html file and it also doesn't work: code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Words & Phrases</title>

    
  </head>

  <body>

    <input type="text" id=“id_username”>

<script>

    document.querySelector('#id_username').textContent = 'username';

</script>

</body>

CodePudding user response：

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">

CodePudding user response：

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 :)

CodePudding user response：

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.

$("input[name=username]").val("hello_world")

CodePudding user response：

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 = '';
})

CodePudding user response：

Found an easier was to do this:

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