javascript - populate one div with array data on if statement -

i have 5 div tags same id "answer" these div tags need execute script: document.getelementbyid("answer").innerhtml = answer;

when trigger made (already completed, reference):

var arranswers = ["specialword", "word1", "word2" "word3" "word4"]; socket.on('answer', function (answer) {     console.log('answer: ' + answer);         if ( $.inarray(answer, arranswers) > -1 ) {             console.log('correct answer!');         } else {             console.log('incorrect answer :(');         } }); 

i have in html:

<div class="answer"></div> <div class="answer"></div> <div class="answer"></div> <div class="answer"></div> <div class="answer"></div> 

i need make if answer correct, picks 1 empty div tag , populates answer specified variable "answer".

i in theory if statement if innerhtml empty, return other results too. if else statement queries if it's empty, if .innerhtml section , break out. seems long.

what's shortest logicalway of going this?

thanks in advance

here can use document.getelementsbyclassname("answer") array, use math.random() * lengthofarray generate random number , using indexer access element , set innerhtml element. this:

var arranswers = ["specialword", "word1", "word2" "word3" "word4"]; var answers = document.getelementsbyclassname("answer"); var index = math.random() * answers.length; socket.on('answer', function (answer) {     console.log('answer: ' + answer);         if ( $.inarray(answer, arranswers) > -1 ) {             console.log('correct answer!');             answers[index].innerhtml = answer; //set answer         } else {             console.log('incorrect answer :(');         } });