用JavaScript填充多個DIV

Question

我正在嘗試在我的網站上創建一個定義塊，它在其中從數組中隨機選擇一個單詞，然后將其連同其IPA和定義一起顯示。

我對JavaScript有基本的了解，但是這確實對我重要。

我已經寫了一些非常基本的偽代碼來演示我想做的事情。 任何對實際操作的幫助將不勝感激！

JavaScript的：

var Selector = Random(3)
var Definitions = [
    {
        "word":"House",
        "phonetic":"haʊs",
        "definition":"The part of a theatre where the audience is seated, also known as an auditorium."
    },
    {
        "word":"Apron",
        "phonetic":"ˈeɪprən",
        "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit."
    }, 
    {
        "word":"Barn Door",
        "phonetic":"bɑːn dɔː",
        "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam."
    }
 ]

HTML

<div id="word">{Definition.Selector.word}</div>
<div id="phonetic">{Definition.Selector.phonetic}</div>
<div id="definition">{Definition.Selector.definition}</div>

雖然我知道這不像是可行的代碼，但我希望它能充分體現我的想法。

長話短說： 選擇隨機數。 從數組中選擇項目。 用該數組項中的三個內容填充三個div。

感謝您的寶貴時間（並希望能得到答復）！

Answer 1

並且，要完成depperm使用純JavaScript所做的相同操作，請參閱此jsFiddle 。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

var definitions = [
    {
        "word":"House",
        "phonetic":"haʊs",
        "definition":"The part of a theatre where the audience is seated, also known as an auditorium."
    },
    {
        "word":"Apron",
        "phonetic":"ˈeɪprən",
        "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit."
    }, 
    {
        "word":"Barn Door",
        "phonetic":"bɑːn dɔː",
        "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam."
    }
 ];

var index = getRandomInt(0, definitions.length);

document.getElementById('word').innerHTML = definitions[index].word;

document.getElementById('phonetic').innerHTML = definitions[index].phonetic;

document.getElementById('definition').innerHTML = definitions[index].definition;

Answer 2

一種可行的解決方案

 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } var Definitions = [ { "word":"House", "phonetic":"haʊs", "definition":"The part of a theatre where the audience is seated, also known as an auditorium." }, { "word":"Apron", "phonetic":"ˈeɪprən", "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit." }, { "word":"Barn Door", "phonetic":"bɑːn dɔː", "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam." } ]; var rand=getRandomInt(0, Definitions.length); $('#word').text(Definitions[rand].word); $('#phonetic').text(Definitions[rand].phonetic); $('#definition').text(Definitions[rand].definition); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="word"></div> <div id="phonetic"></div> <div id="definition"></div>