為什么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不支持非標准的innerText屬性 。

請改用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>