Displaying images from javascript array in html

Question

I want to use javascript to display html code (mix of text and images) in a div. The images are stored in an array, and which ones display will depend on a variable (handValue) put in to an if/else statement.

I think my syntax / concatenation is incorrect but can't quite figure it out.

The arrays that I have declared are as follows:

//Array for card images. 
       var startHand = ['images/cards/cardResult1',
                        'images/cards/cardResult2',
                        'images/cards/cardResult3',
                        'images/cards/cardResult4',
                        'images/cards/cardResult5',
                        'images/cards/cardResult6',
                        'images/cards/cardResult7',
                        'images/cards/cardResult8']
                                                ;

//Array for card tooltips. Each tooltip matches with a card category. 
       var toolTips = ['Category 1: AA, AKs, KK, QQ, JJ',
                       'Category 2: AK, AQs, AJs, KQs, TT',
                       'Category 3: AQ, ATs, KJs, QJs, JTs, 99',
                       'Category 4: AJ, KQ, KTs, QTs, J9s, T9s, 98s, 88',
                       'Category 5: A9s - A2s, KJ, QJ, JT, Q9s, T8s, 97s, 87s, 77, 76s',
                       'Category 6: AT, KT, QT, K9s, J8s, 86s, 75s, 65s, 66, 55, 54s',
                       'Category 7: K8s - K2s, Q8s, T7s, J9, T9, 98, 64s, 53s, 44, 43s, 33, 22',
                       'Category 8: A9, K9, Q9, J8, J7s, T8, 96s, 87, 85s, 76, 74s, 65, 54, 42s, 32s'];

My function is as follows. I assume a for loop would also tidy up my code (there are 8 categories in total). So any help on that would be appreciated too.

if (handValue >= 0.9) {
     return document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";
                                }

     else {
            return document.getElementById("resultText").innerHTML = 'You should play if your cards are in one of the following categories:<br><br><table>';


    //Category 1
            if (handValue < 0.06) {
             return document.getElementById("resultText").innerHTML = 
                '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td>';
                                            }                  

    //Category 2
                 else if (handValue < 0.20) {
             return document.getElementById("resultText").innerHTML = 
                '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td>';
                                            }

    //Category 3
                 else if (handValue < 0.40) {
               return document.getElementById("resultText").innerHTML = 
          '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td><td class="tooltip">' + startHand[2] + '.jpg"><span class="tooltiptext">' + toolTips[2] + '</span></td>';}

Answer 1

Try this waterfall logic. In your example you return immediately in your else statement. Category 1, 2, 3 if statements are never reached.

function generateMarkup(handValue) {
    if (handValue >= 0.9) {
        return document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";
    }

    if (handValue < 0.06) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td>';   
    }

    if (handValue < 0.20) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td>';
    }

    if (handValue < 0.40) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td><td class="tooltip">' + startHand[2] + '.jpg"><span class="tooltiptext">' + toolTips[2] + '</span></td>';
    }

    return document.getElementById("resultText").innerHTML = 'You should play if your cards are in one of the following categories:<br><br><table>';
}

Answer 2

Just to add to the first answer you can make the following improvements.

1) Use double quotes for string arrays its a better way according to w3schools

 var startHand = ["images/cards/cardResult1",
                     "images/cards/cardResult2"];

2) If you are not using the return values take them off

    function generateMarkup(handValue) {
        if (handValue >= 0.9) {
           document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";

     }

//More lines of code
//...
//...

  }  

3)Check out a library like JQuery that will make things easier

    function generateMarkup(handValue) {
            if (handValue >= 0.9) {
              $("#resultText").html("You can play any two cards from this position.");

        } 

    //More lines of code
    //...
    //...

   }