[英]Why Doesn't This Code Work in FireFox and IE but does in Chrome?
I am currently using this code: 我目前正在使用此代码:
Code can be seen here - http://jsbin.com/ESOdELU/1/edit 可以在这里看到代码-http://jsbin.com/ESOdELU/1/edit
var wordRandomizer = {
run: function (targetElem) {
var markup = this.createMarkup();
targetElem.appendChild(markup);
},
createMarkup: function () {
var that = this;
var frag = document.createDocumentFragment();
this.elem = document.createElement('span');
var button = document.createElement('button');
button.innerText = 'Change Item';
button.addEventListener('click', function () {
that.changeItem();
});
frag.appendChild(this.elem);
frag.appendChild(button);
return frag;
},
changeItem: function () {
var rand = this.getRandInt(1, this.items.length) - 1;
console.log(rand);
this.elem.innerText = this.items[rand];
},
getRandInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
items: ['itemA', 'itemB', 'itemC', 'itemD']
};
wordRandomizer.run(document.body);
The code works fine in Chrome but in FireFox the button shows very small and doesn't work and in IE the code doesn't work at all. 该代码在Chrome中工作正常,但在FireFox中,按钮显示的很小,无法正常工作;在IE中,该代码根本无法正常工作。
The problem is here: 问题在这里:
button.innerText = 'Change Item';
innerText
is not a valid DOM property. innerText
不是有效的DOM属性。 It may be supported by some browsers, but it's non-standard, and should not be used. 某些浏览器可能支持它,但是它是非标准的,因此不应使用。
You can replace innerText
with either: 您可以将
innerText
替换为:
textContent
(which is the direct standards-compliant equvalent), textContent
(这是直接符合标准的等效项), or with 或搭配
innerHTML
(which is a bit different, but will be identical in your example, and is compatible with older browsers) innerHTML
(有点不同,但是在您的示例中将是相同的,并且与旧版浏览器兼容)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.