Javascript没有向html元素添加类

Question

我偶然发现了一个有点奇怪的问题。我似乎无法在我的html元素上编辑类。我一直在寻找类似的案例，但没有找到解决我问题的方法。使这种情况有所不同的唯一原因是我使用Django框架来反映后端。我在这里的代码将“form-control-danger”类添加到所有输入字段，这些字段在某种程度上已经接收到错误的输入。观察底部标签内的代码。

<form class="form" method="post" action="/register/">
        {% csrf_token %}
        {% for field in register_form %}
            {% if field.name != "agree_to_terms" %}
                <div class="input-group">
                    <span class="input-group-addon">
                        {% if field.name == "first_name" %}
                            <i class="now-ui-icons users_circle-08"></i>
                        {% elif field.name == "last_name" %}
                            <i class="now-ui-icons text_caps-small"></i>
                        {% elif field.name == "email" %}
                            <i class="now-ui-icons ui-1_email-85"></i>
                        {% elif field.name == "password1" %}
                            <i class="now-ui-icons ui-1_lock-circle-open"></i>
                        {% elif field.name == "password2" %}
                            <i class="now-ui-icons ui-1_lock-circle-open"></i>
                        {% endif %}
                    </span>
                    {{ field }}
                </div>
            {% else %}
                <div class="form-check">
                    <label class="form-check-label">
                        {{ field }}
                        <span class="form-check-sign"></span>
                        I agree to the
                        <a href="#">terms and conditions</a>.
                    </label>
                </div>
            {% endif %}
        {% endfor %}
        {% if error_fields_by_id %}
            <script>
            {% for field_id in error_fields_by_id %}
                document.getElementById("{{ field_id }}").setAttribute("class", "form-control-danger");
            {% endfor %}
            </script>
        {% endif %}
        <!-- If you want to add a checkbox to this form, uncomment this code -->
        <div class="card-footer text-center">
            <input type="submit" class="btn btn-primary btn-round btn-lg" value="Get Started">
        </div>
    </form>

这是输出的html代码的外观

<div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_email-85"></i>  
      </span>
      <input type="text" name="email" value="[email protected]" class="form-control" placeholder="Email..." id="email" name="email" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>  
      </span>
      <input type="password" name="password1" id="password1" class="form-control" required placeholder="Password..." name="password1" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>  
      </span>
      <input type="password" name="password2" id="password2" class="form-control" required placeholder="Password again..." name="password2" maxlength="254" />
  </div>
  <div class="form-check">
      <label class="form-check-label">
          <input type="checkbox" name="agree_to_terms" class="form-check-input" required checked id="agree-to-terms" name="agree_to_terms" />
          <span class="form-check-sign"></span>
          I agree to the
          <a href="#">terms and conditions</a>.
      </label>
  </div>
<script>
    document.getElementById("password1").setAttribute("class", "form-control-danger");
    document.getElementById("password2").setAttribute("class", "form-control-danger");
</script>

谢谢

Answer 1

我没有使用django，但我看到这里“名字”重复

input type =“password”name =“password1”id =“password1”class =“form-control”required placeholder =“Password ...”name =“password1”maxlength =“254”

Answer 2

<style type="text/css">
    .form-control-danger{color:red;}
</style>
<div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_email-85"></i>  
      </span>
      <input type="text" name="email" value="[email protected]" class="form-control" placeholder="Email..." id="email" name="email" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>  
      </span>
      <input type="password" name="password1" id="password1" class="form-control" required placeholder="Password..." name="password1" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>  
      </span>
      <input type="password" name="password2" id="password2" class="form-control" required placeholder="Password again..." name="password2" maxlength="254" />
  </div>
  <div class="form-check">
      <label class="form-check-label">
          <input type="checkbox" name="agree_to_terms" class="form-check-input" required checked id="agree-to-terms" name="agree_to_terms" />
          <span class="form-check-sign"></span>
          I agree to the
          <a href="#">terms and conditions</a>.
      </label>
  </div>


<script type="text/javascript">
<!--
    function obj(obj,txt){ //Frankenstein's = Constantin's spider
    var result='';
    for (var i in obj) result += txt + "." + i + " = " + obj[i] +'-'+typeof obj[i]+ "\n<br>\n";
    //tt=document.open('about:blank',"_blank","");
    document.write(result);
    //tt.document.close();
}

obj(document.getElementById("password1"),'document.getElementById("password1")');

document.getElementById("password1").classList.add('form-control-danger');
//-->
</script>