ボタン上にランダムな文字列を表示するクリック

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]); 
} 

上記の2つのスニペットは、私のJavaScriptコード全体を構成しています。

Answer 1

ここに固定されたJSがあります。主な問題は、Object.keys(quoteList).lengthを使用して、単純な配列であっても、長さがquoteListになっていたことでした。さらに、あなたはdocument.writeを使用していましたが、これは一般に悪い習慣と考えられています。引用符と著者の文字列にdocument.getElementById('quotebox').innerHTMLを設定して置き換えました。最後に、quoteオブジェクトの個々の属性にアクセスし、quoteオブジェクトから文字列を作成するのではなく、quoteオブジェクト全体を画面に書き込んでいました。

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; 
}