Почему document.getElementById не распознается только Firefox

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>