【问题标题】:Why Doesn't This Code Work in FireFox and IE but does in Chrome?为什么这段代码在 FireFox 和 IE 中不起作用,但在 Chrome 中起作用?
【发布时间】:2013-11-08 22:42:33
【问题描述】:

我目前正在使用此代码:

代码可以在这里看到 - 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);

该代码在 Chrome 中运行良好,但在 FireFox 中按钮显示非常小且不起作用,而在 IE 中该代码根本不起作用。

【问题讨论】:

  • 您的代码末尾是否有额外的],还是此处粘贴的拼写错误?
  • 你能用你的代码和css创建一个jsfiddle
  • 当它在 IE 中“不起作用”时,错误是什么?你检查了吗?
  • @Mathletics 那是个错误。感谢您指出!
  • @jezzipin 我在里面为你添加了一个 JS Bin 链接 :)

标签: javascript css google-chrome firefox browser


【解决方案1】:

问题出在这里:

button.innerText = 'Change Item';

innerText 不是有效的 DOM 属性。它可能被某些浏览器支持,但它是非标准的,不应使用。

您可以将innerText 替换为:

  • textContent(这是直接符合标准的等价物),

或与

  • innerHTML(有点不同,但在您的示例中是相同的,并且与旧版浏览器兼容)

【讨论】:

  • 可能想提一下,在 IE 9 之前也不支持 addEventListener - 请参阅 stackoverflow.com/questions/6927637/…。这就是人们一直使用像 jQuery 这样的库的原因。
  • 这非常适合在 IE 和 FireFox 上显示按钮,但两种浏览器上的按钮都无法获取任何项目。不过,该脚本在 Chrome 上仍然可以正常运行。
  • @CCC:可能是因为您在changeItem() 函数中还有另一个innerText 调用。另请注意 Mike Edwards 上面关于 IE8 不支持 addEventListener() 的评论。
  • @Spudley 哦,是的,我很傻,也感谢您指出这一点。我可以确认它现在适用于 FireFox。 IE 仍然无法工作,但这不是什么大问题,因为我的大部分流量来自 Chrome 和 FireFox :)
猜你喜欢
  • 1970-01-01
  • 2011-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多