我的 script.js 文件中的新引用函數不會使作者姓名出現

Question

每次單擊新代碼按鈕時，作者的名字都是“未知”，並注意 API 提供的數據。 代碼在這個 Codepen 中：

https://codepen.io/osvaldogrc/pen/poPLyzW

const quoteContainer = document.getElementById('quote-container');
const quoteText = document.getElementById('quote');
const authorText = document.getElementById('author');
const twitterBtn= document.getElementById('twitter');
const newQuoteBtn = document.getElementById('new-quote');
const loader = document.getElementById('loader');

let apiQuotes = [];
//New Quote
function newQuote(){
    complete();
    //Random quote
    const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
    
    quoteText.textContent = quote.text;
}

Answer 1

newQuote只設置 `quoteText.textContent

嘗試添加authorText.textContent = quote.author ? quote.author : "Unknown"; authorText.textContent = quote.author ? quote.author : "Unknown"; 在函數中

Answer 2

您需要將響應對象的author屬性分配給對應span的textContent ：

 const quoteContainer = document.getElementById('quote-container'); const quoteText = document.getElementById('quote'); const authorText = document.getElementById('author'); const twitterBtn= document.getElementById('twitter'); const newQuoteBtn = document.getElementById('new-quote'); const loader = document.getElementById('loader'); let apiQuotes = []; // Show loading function loading() { loader.hidden = false; quoteContainer.hidden = true; } // Hide loading function complete() { quoteContainer.hidden = false; loader.hidden =true; } //New Quote function newQuote(){ complete(); //Random quote const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)]; quoteText.textContent = quote.text; author.textContent = quote.author; } // Check quote length if(quoteText.length > 50) { quoteText.classList.add('long-quote'); } else { quoteText.classList.remove('long-quote'); } // Set quote quoteText.textContent = quoteText; complete(); //Author field authorText.textContent = quote.author ? quote.author : "Unknown"; //Get Quotes fom API async function getQuotes(){ loading(); const apiUrl = `https://type.fit/api/quotes`; try { const response = await fetch(apiUrl); apiQuotes = await response.json(); newQuote(); } catch (error){ //Error here } } //Twee function tweetQuote() { const twitterUrl =`https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`; window.open(twitterUrl, '_blank'); } //Event Listener newQuoteBtn.addEventListener('click', newQuote); twitterBtn.addEventListener('click', tweetQuote) //On load getQuotes();

 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); html { box-sizing: border-box; } body{ margin: 0; min-height: 100vh; background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='48' height='32' viewBox='0 0 48 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M27 32c0-3.314 2.686-6 6-6 5.523 0 10-4.477 10-10S38.523 6 33 6c-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 6.627 0 12 5.373 12 12s-5.373 12-12 12c-2.21 0-4 1.79-4 4h-2zm-6 0c0-3.314-2.686-6-6-6-5.523 0-10-4.477-10-10S9.477 6 15 6c3.314 0 6-2.686 6-6h-2c0 2.21-1.79 4-4 4C8.373 4 3 9.373 3 16s5.373 12 12 12c2.21 0 4 1.79 4 4h2z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); color: black; font-family: Montserrar, sans-serif; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; } .quote-container{ width: auto; max-width: 900px; padding: 20px 30px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.4); box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2); } .quote-text { font-size: 2.75rem; } #long-quote{ font-size: 2rem; } .fa-quote-left{ font-size: 4rem; } .quote-author{ margin-top: 15px; font-size: 2rem; font-weight: 400; font-style: italic; } .button-container { margin-top: 15px; display: flex; justify-content: space-between; } button{ cursor: pointer; font-size: 1.2rem; height: 2.5rem; border: none; border-radius: 10px; color: #fff; background-color: #333; outline: none; padding: 0.5rem 1.8rem; box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65); } button:hover{ filter: brightness(110%); } button:active{ transform: translate(0, 0.3rem); box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65); } .twitter-button:hover{ color: #38a1f3; } .fa-twitter{ font-size: 1.5rem; } /* Media query*/ @media screen and (max-width: 1000px) { .quote-container{ margin: auto 10px; } .quote-text{ font-size: 2.5rem; } } /*Loader*/ .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid#333; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quote Generator</title> <link rel="icon" type="image/png" href="https://www.google.com/s2/u/0/favicons?domain=css-tricks.com"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="quote-container" id="quote-container"> <div class="quote-text"> <!--Quote--> <i class="fas fa-quote-left"></i> <span id="quote"></span> </div> <!-- Author--> <div class="quote-author"> <span id="author"></span> </div> <!--Buttons--> <div class="button-container"> <button class="twitter-button" id="twitter" title="Tweet This!"> <i class="fab fa-twitter"></i> </button> <button id="new-quote">New Quote</button> </div> </div> <!--Loader--> <div class="loader" id="loader"></div> <script src="script.js"></script> <script src="quotes.js"></script> </body> </html>

Answer 3

在newQuote函數中，您沒有為“作者文本”設置值。 如果要將值設置為authorText ，請將值設置為authorText ：

authorText.textContent = quote.author;

Answer 4

在代碼的第 30 行添加 authorText.textContent 解決了這個問題。

謝謝大家。

//New Quote
function newQuote(){
    complete();
    //Random quote
    const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];

    quoteText.textContent = quote.text;
    authorText.textContent = quote.author;
}