为什么document.getElementById不能仅由Firefox识别

Question

我有以下代码，它只是生成随机数 列表中的序列。 它在Chrome和Safari中运行良好：

var strings = [
 	'For he who can wait, everything comes in time.',
    'We will wait to see if it is a doozy before we decide how to cover it, and what it all means.',
    'We need to talk about what we are going to do and see and decide. We\'ll have to wait and see.'
];

var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-text').innerText = rand;

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ddd;
    padding-top: 100px;
}
.loading-gif {
    display: block;
    width: 50px;
    height: 50px;
    background: #aaa;
    margin: 10px auto;
}

<div id="container" class='loading' >
     <div id='loading-text' class='loading-text'></div>
     <img class="loading-gif" id="processing" src= "images/squares.gif"/>
</div>

但是当我在Firefox中运行时，JavaScript无效（例如，未生成随机字符串）。我怎样才能启用它？

Answer 1

你误解了这个问题。

Firefox不支持the non-standard innerText property。

改为使用textContent。

var strings = [
 	'For he who can wait, everything comes in time.',
    'We will wait to see if it is a doozy before we decide how to cover it, and what it all means.',
    'We need to talk about what we are going to do and see and decide. We\'ll have to wait and see.'
];

var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-text').textContent = rand;

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ddd;
    padding-top: 100px;
}
.loading-gif {
    display: block;
    width: 50px;
    height: 50px;
    background: #aaa;
    margin: 10px auto;
}

<div id="container" class='loading' >
     <div id='loading-text' class='loading-text'></div>
     <img class="loading-gif" id="processing" src= "images/squares.gif"/>
</div>

Answer 2

你也可以使用innerHTML属性，

var strings = [
 	'For he who can wait, everything comes in time.',
    'We will wait to see if it is a doozy before we decide how to cover it, and what it all means.',
    'We need to talk about what we are going to do and see and decide. We\'ll have to wait and see.'
];

var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-text').innerHTML = rand;

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ddd;
    padding-top: 100px;
}
.loading-gif {
    display: block;
    width: 50px;
    height: 50px;
    background: #aaa;
    margin: 10px auto;
}

<div id="container" class='loading' >
     <div id='loading-text' class='loading-text'></div>
     <img class="loading-gif" id="processing" src= "images/squares.gif"/>
</div>