Question

当class - 事件发生时，我使用此代码更改html元素的onclick。发生了变化（即文本颜色发生变化），但变化不稳定，它会回到之前class的样式，而我的javascript代码似乎没有任何效果。

function submitrequest(){
    var x = document.forms["signupform"]["name"].value;
    if(x.toString().length <= 0){
        var y = document.getElementById("nametd");
        y.className = 'change';
    }
}

我该怎样做才能使这种效果永久化？

Answer 1

您无需定义点击处理程序即可注意到单击了表单的按钮。表单可以有一个提交按钮：单击此按钮时，将触发表单的提交事件。此外，当用户没有点击按钮并按下Enter时，也会触发提交事件。所以你自动处理这两种情况。

我建议你用这种方式定义你的功能：

  window.onload = function(){

    document.getElementById('signupform').addEventListener('submit',function(e){

      changeClassOfNametd();
      e.preventDefault(); // this prevents the side from being reloaded by the script.

    });

  };

  function changeClassOfNametd(){
      var nameValue = document.forms["signupform"]["name"].value;
      if(nameValue){ // when value is "" (zero, no signs) it is false anyway
          var y = document.getElementById("nametd");
          y.className = 'change';
          //y.classList.toggle('change'); you can toggle classname "change" too
          // which works that way class="unchange" -> class="unchange change"  
          // you have to define appropriate css-classes for toggle.
      }
  }

以上代码无论您将其放入html文件中都能正常工作。

Answer 2

通过函数的名称在表单提交中调用它。

因为表单提交并返回到新页面加载时设置的原始文件。

如果要维护它，则必须在下一页加载时应用该类。大多数开发人员都会使用服务器端。如果您实际上不希望表单提交，请取消它。

使用javascript更改html元素的类是不稳定的

2 个答案: