在 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 元素

中更改我想要的值

this is console screeenshot

Answer 1

您的代码按预期运行，如您在下面的代码片段中所见。确保您运行此脚本在 DOM 元素创建之后。将您的脚本放在 </body> 之前，或者确保它在 DOMContentLoaded 之后执行（下面的堆栈代码段执行此操作 ^）

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>

在 span 元素中获取空值

getting null value in span element

html

javascript

api

json

console.log