Javascript未向html元素添加类答案

【问题标题】：Javascript not adding class to html elementJavascript未向html元素添加类
【发布时间】：2018-06-12 14:26:35
【问题描述】：

我偶然发现了一个有点奇怪的问题。我似乎无法在我的 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="maxxie@hotmail.com" 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>

谢谢

【问题讨论】：

你为什么用setAttribute()而不是classList.add()？
这只是我尝试的最新版本。我也试过 classList.add("form-control-danger") 。
另外，我在您的代码示例中找不到接收 id="{{ field_id }}" 的 HTML 元素。
能否将生成的代码放入sn-p？
请不要张贴文字图片。发布文本。

标签： javascript jquery html django forms

【解决方案1】：

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

input type="password" name="password1" id="password1" class="form-control" 需要 placeholder="Password..." name="password1" maxlength="254"

【讨论】：

【解决方案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="maxxie@hotmail.com" 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>

【讨论】：