爲什麼document.getElementById不能被火狐識別

Question

我有下面的代碼，它只是從列表中產生隨機的 序列。 它工作正常，在Chrome和Safari：

var strings = [ 
 
    \t '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 = [ 
 
    \t '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 = [ 
 
    \t '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>