0

I have 5 div tags all with the same id "answer" these div tags need to execute this script: document.getElementById("answer").innerHTML = answer;

when a trigger is made (Already completed, but for 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 this in my HTML:

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

I need to make it so that if the answer is correct, it picks ONE empty div tag and populates it with the answer specified from the variable "answer".

I could in theory do an if statement for if the innerhtml is empty, but that would return the other results too. I could also do an if else statement so it queries if it's empty, if so do the .innerhtml section and then break out. But that seems too long.

What's the shortest logicalway of going about this?

Thanks in advance

Bradly Spicer
  • 2,278
  • 5
  • 24
  • 34
  • Try to add an attribute to your element (`element.setAttribute('data-answered', 'true')`) when answered and then check for the value of that attribute (`if(element.getAttribute('answered')){ ... }` – somethinghere Jun 10 '15 at 13:50
  • getElementByClassName() not Id, those elements do not have an id, they have a class – depperm Jun 10 '15 at 13:53
  • How does this not effect other divs? not quite sure how to apply this without all the divs being changed? or as javascript is single threaded does it do it procedurally? – Bradly Spicer Jun 10 '15 at 13:56

1 Answers1

1

Here you can use document.getElementsByClassName("answer") array, use Math.random() * lengthOfArray to generate random number and then using indexer access element and set the innerHTML for that element. So this would look like 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 :(');
        }
});
fsacer
  • 1,382
  • 1
  • 15
  • 23
  • Not exactly as expected, Is it possible for when it's re-triggered to not replace that div again? This is replacing the same div. Would it be better to create divs? – Bradly Spicer Jun 10 '15 at 14:13
  • Yeah of course is possible, you just set a flag and use an if statement when setting the div, the other thing you could do is to have array of ints which would represent indexes of used divs and then always regenerate random number and check if array already contains that generated. I'm not soure what you want to achieve. you can also create the DIVs dynamically using http://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript. – fsacer Jun 10 '15 at 14:31