在 span 元素中获取空值

Question

当我尝试运行我的 index.html 文件时

<div class="quote-text">
        <i class="fas fa-quote-left"></i>
        <span id="quote"></span>
    </div>
    <!-- author element -->
    <div class="quote-author">
        <span id="author"></span>
    </div>

我的 textContent 方法没有显示任何内容。

const quoteText = document.getElementById("quote");
const authorText = document.getElementById("author");

let apiQuotes = [] 

function newQuote(){
    const ranQuote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
    console.log(ranQuote);
    console.log(ranQuote.text);
    console.log(ranQuote.author);
    console.log(quoteText);<!-- this shows null -->
    console.log(authorText); <!-- this shows null -->
    quoteText.textContent = ranQuote.text;
    authorText.textContent = ranQuote.author;
};

async function getQuotes(){
    const apiUrl = 'https://type.fit/api/quotes';
    try{
        const response = await fetch(apiUrl);
        apiQuotes = await response.json()
        newQuote();
    }
    catch(error){
    }
}

getQuotes();  

我在控制台记录了 span 元素值，并且它的记录为 null。而且我无法在 span 元素中更改我想要的值

this is console screeenshot

Answer 1

您的代码按预期运行，您可以在下面的 sn-p 中看到。 确保您在 创建 DOM 元素之后运行此脚本。 将您的脚本放在</body> 之前，或者确保它在DOMContentLoaded 之后执行（下面的Stack sn-p 执行此操作^）

const quoteText = document.getElementById("quote");
const authorText = document.getElementById("author");

let apiQuotes = []

function newQuote() {
  const ranQuote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
  console.log(ranQuote);
  console.log(ranQuote.text);
  console.log(ranQuote.author);
  console.log(quoteText); <!-- this shows null -->
  console.log(authorText); <!-- this shows null -->
  quoteText.textContent = ranQuote.text;
  authorText.textContent = ranQuote.author;
};

async function getQuotes() {
  const apiUrl = 'https://type.fit/api/quotes';
  try {
    const response = await fetch(apiUrl);
    apiQuotes = await response.json()
    newQuote();
  } catch (error) {}
}

getQuotes();

<div class="quote-text">
  <i class="fas fa-quote-left"></i>
  <span id="quote">Wait for the request to finish...</span>
</div>
<!-- author element -->
<div class="quote-author">
  <span id="author"></span>
</div>