Question

我实例化一个对象，其参数是一个按钮。当一个实例的按钮单击，它应该运行一个函数，但它不会。在完整版代码中，Chrome会在控制台中显示此消息：“未捕获的TypeError：无法读取属性'onclick'未定义”

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();
};

Fiddle

Answer 1

如果您想为每个实例添加不同的按钮：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;

从对象的按钮onclick不起作用

1 个答案: