Javascript : onclick="class method" => 可能吗？

Question

我有一个 class 有一个生成 100 个输入文本的方法。

我想在这些输入文本中添加另一种方法（例如设置实例属性）。

这里是下面的代码：

<div id="container"></div>

<script type="text/javascript">

container = document.getElementById("container");

//Class :
function Foo(age)
{
    //Attribute :
    this.age = age;

    //Setter :
    this.setAge = function(age)
    {
        this.age = age;

        console.log(this.age);
    };

    this.displayInputText = function()
    {
        for(var i = 0; i < 100; i++)
        {container.innerHTML += '<input type="text" onkeyup="'+this.setAge(value)+';">';}
    };
}

foo1 = new Foo(32);
foo1.displayInputText();

</script>

但是 onkeyup="'+this.setAge(value)+'" 在控制台中生成 javascript 错误，因此它不起作用。

你有想法吗？

衷心感谢。

Answer 1

this.setAge returns undefined，所以你的行转换为

{container.innerHTML += '<input type="text" onkeyup="undefined">';}

如果您想使用此输入框中给出的任何值设置为 setAge，则需要使用 addEventListener.

  var self = this;
  for (var i = 0; i < 10; i++) 
  {
    var inputEl = document.createElement( "input" );
    inputEl.addEventListener("keyup", function(){
        self.setAge( this.value );
    });
    container.append( inputEl );
  }

演示

<div id="container"></div>

<script type="text/javascript">
  container = document.getElementById("container");

  //Class :
  function Foo(age) {
    //Attribute :
    this.age = age;

    //Setter :
    this.setAge = function(age) {
      this.age = age;

      console.log(this.age);
    };

    this.displayInputText = function() {
      var self = this;
      for (var i = 0; i < 10; i++) 
      {
        var inputEl = document.createElement( "input" );
        inputEl.addEventListener("keyup", function(){
            self.setAge( this.value );
        });
        container.append( inputEl );
      }
    };
  }

  foo1 = new Foo(32);
  foo1.displayInputText();
</script>

Javascript : onclick="class method" => 可能吗？

Javascript : onclick="class method" => possible?

javascript

class-method

eventhandler