用JavaScript填充多个DIV

Question

I am trying to create a definition block on my website, where it randomly picks a word from an array then displays it along with its IPA and definition.

I have a basic understanding of JavaScript, however this is really above me.

I have written some really basic, psuedo code, to demonstrate what I'd like to do. Any help on how to actually do it would be greatly appreciated!

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>

While I understand this is nothing like workable code, I hope it can give enough of a representation of my idea.

Which long story short is: Pick random number. Select item from array. Fill three divs with three pieces of content from that array item.

Thanks for your time(and hopefully answers)!

Answer 1

And, to do the same thing depperm did using pure JavaScript, see this 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

One viable solution

 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>