0

我实例化一个对象,参数是一个按钮。单击实例的按钮时,它应该运行一个函数,但它没有。在完整版的代码中,Chrome 在控制台中给出了这条消息:“Uncaught TypeError: Cannot read property 'onclick' of undefined”

HTML:

<textarea id='txt' readonly rows='5' cols='40'></textarea>
<button id='btn' type='button'>click</button>

JS:

var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var foo = new Foo(btn);

function Foo(btn) {
    this.button = btn;
}

Foo.prototype.buy = function() {
    txt.value = 'Foo Bar';
};

Foo.button.onclick = function() {
    foo.buy();
};

小提琴

4

1 回答 1

0
  • 如果您想为每个实例使用不同的按钮:Demo

    var txt = document.getElementById('txt');
    
    function Foo(btn) {
        this.button = btn;
        btn.onclick = this.buy;
    }
    
    Foo.prototype.buy = function() {
        txt.value = this.value;
    };
    
    new Foo(document.getElementById('btn'));
    new Foo(document.getElementById('btn2'));
    

    如果你喜欢简洁的代码,你也可以使用(this.button = btn).onclick = this.buy;

  • 如果您希望所有实例都使用相同的按钮:Demo

    var txt = document.getElementById('txt'),
        btn = document.getElementById('btn');
    
    function Foo() {
    
    }
    
    (Foo.prototype.btn = btn).onclick = Foo.prototype.buy = function() {
        txt.value = 'Foo Bar';
    };
    
    var a = new Foo(),
        b = new Foo();
    console.log(a === b); // false;
    console.log(a.btn === b.btn); // true;
    
于 2013-11-10T03:38:00.303 回答