CODEWITHSUNDEEP
javascripthtmlbutton
Laura
Laura

Reputation: 33

Text does not appear on buttons

I'm trying to create four buttons where four labels appear in a random order:

<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

The labels are stored under the

var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];

Then the code iterates through the choices to stick them in the buttons:

for (var i=0; i<choiceLabels; i++) {
    var theID="#quizChoice"+i.toString();
    $(theID).text(choiceLabels[i])
};

But the text does not appear on the buttons - they stay empty. Anybody know why?

Upvotes: 1

Views: 46

Answers (2)

rafaelgomesxyz
rafaelgomesxyz

Reputation: 1405

Your error is here: i<choiceLabels. choiceLabels is an array, so you have to do i<choiceLabels.length.

var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
    var theID="#quizChoice"+i.toString();
    $(theID).text(choiceLabels[i])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You are missing the length value in choiceLabels. The iteration should loop through choiceLabels.length:

var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];

for (var i=0; i<choiceLabels.length; i++) {
    var theID="#quizChoice"+i.toString();
    $(theID).text(choiceLabels[i])
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

Upvotes: 1

Related Questions