在按鈕上顯示一個隨機字符串單擊

Question

我的目標是有一個按鈕，單擊時會顯示一個隨機引號。我已經創建了一個JSON對象來存儲我的引號，並編寫了一個函數來隨機選擇並打印對象中的引號。

的HTML代碼段 - 按鈕（引導等）

<div class="row" id="quotebox"> 
    <div class="text-center"> 
     <button class="btn btn-default" onclick ="randomQuote()"type="submit">Hit Me Baby One More Time</button> 
    </div> 
</div> 

JSON對象存儲5個引號

var quotesList = [{ 
    quote: "Planting popcorn does not produce more popcorn", 
    person: "Farmer Ted" 
}, { 
    quote: "White whale, bad whale", 
    person: "Confucious (Moby Dick)" 
}, { 
    quote: "Use the strobe function to disorientate your attacker", 
    person: "Flashlight" 
}, { 
    quote: "Apply liberally to your erogenous zones", 
    person: "Spice Bomb" 
}, { 
    quote: "Help me, I'm bleaching", 
    person: "The Great Barrier Reef" 
}]; 

最後，打印的隨機引用的功能（通過的onClick觸發）

function randomQuote() { 
    var listLength = Object.keys(quoteList).length; 
    var randVal = Math.floor(Math.random() * listLength); 
    document.write(quotesList[randVal]); 
} 

以上兩段代碼組成了我的整個JavaScript代碼。

Answer 1

這裏是固定的JS。主要的問題是你使用Object.keys(quoteList).length來獲得quoteList的長度，儘管它只是一個簡單的數組。此外，您正在使用document.write，這通常被認爲是不好的做法。我通過將document.getElementById('quotebox').innerHTML設置爲帶有引號和作者的字符串來取代它。最後，您將整個引用對象寫入屏幕，而不是訪問引用對象的各個屬性並從中構建字符串。

var $quoteBox = document.getElementById('quotebox'); 

var quotesList = [ 
    { 
    quote: "Planting popcorn does not produce more popcorn", 
    person: "Farmer Ted" 
    }, { 
    quote: "White whale, bad whale", 
    person: "Confucious (Moby Dick)" 
    }, { 
    quote: "Use the strobe function to disorientate your attacker", 
    person: "Flashlight" 
    }, { 
    quote: "Apply liberally to your erogenous zones", 
    person: "Spice Bomb" 
    }, { 
    quote: "Help me, I'm bleaching", 
    person: "The Great Barrier Reef" 
    } 
]; 

function randomQuote() { 
    var randIdx = Math.floor(Math.random() * quotesList.length); 
    var randQuote = quotesList[randIdx]; 
    $quoteBox.innerHTML = "\"" + randQuote.quote + "\" - " + randQuote.person; 
}