Click Event Handler Only Appending to DOM Occasionally

Question

I've created an application that, through JavaScript, randomly chooses a movement from an array, stores it as a variable, and through a JQuery click event handler, appends it to HTML. I made considerations for the movement not to repeat itself and it seems to work. However, every ten clicks or so the movement does not append to the page. Running the console I see no errors, just a blank in the span where the element would normally go. I cannot figure out why this only occurs 1/10 of the time. The code works or else it wouldn't work at all. I've attached the JavaScript and HTML files below. I've even tried using a switch statement instead of had no success. I'm still fairly new to programming. Could having three different $document.ready statements have something to do with it. Perhaps the scripts are running out of order and not getting executed?

/*start of wod to go JS*/


var movement1 = movement2 = movement3 = [
    "25 Air Squats",
    "15 Burpees",
    "30 Push Ups",
    "50 Sit Ups",
    "25 Lunges",
    "1 minute Forearm Plank",
    "30 Second Max Effort Tuck Jump"  
];


var i = Math.floor(Math.random() * movement1.length);
var j = Math.floor(Math.random() * movement2.length);
var k = Math.floor(Math.random() * movement3.length);

//code block below ensures movement is not duplicated
if(i==j || i==k || j==k){
var firstPrintOut = movement1[i+1];
var secondPrintOut = movement2[j-1];
var thirdPrintOut = movement3[k+3];     
} else {
var firstPrintOut = movement1[i];
var secondPrintOut = movement2[j];
var thirdPrintOut = movement3[k];   
}


$(document).ready(function(){
    $(".leftButton").click(function(){
    $(".firstMovement").append(firstPrintOut);
    $(".armLeft").slideUp("fast");
    $(".leftButton").attr("disabled",true);//disables button after clicked once
    });
});



$(document).ready(function(){
   $(".middleButton").click(function(){
    $(".secondMovement").append(secondPrintOut); //.secondMovement is class name in HTML
    $(".armMiddle").slideUp("fast");
    $(".middleButton").attr("disabled",true);//disables button after clicked once
    });
});

$(document).ready(function(){
    $(".rightButton").click(function(){
    $(".thirdMovement").append(thirdPrintOut); //.thirdMovement is class name in HTML
    $(".armRight").slideUp("fast");
    $(".rightButton").attr("disabled",true);//disables button after clicked once
    });
});




<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>WOD To Go</title>
     <!-- CSS Styling Below-->
    <link rel = "stylesheet" type = "text/css" href = "normalize.css" />
    <link rel = "stylesheet" type = "text/css" href = "styles.css" />

    <!-- Google Fonts Below -->
   <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>

<body>
<!-- Header -->
<header class="header">     
    <div>

        <h1>WOD To Go</h1>
        <h2>WOD To Go is the perfect travel tool for anyone who can't make it to the gym but still wants to get a great workout.  Whether it's your basement, hotel room, or even the beach, let WOD To Go be your coach and decide what workout is in store for you today.
        </h2>
        <h3>Click each button for a movement.  Your workout is a combination of each movement split however you like as many times a you like.</h3>
    </div>
</header>



<div class="container">
    <div class="leftColumn">
        <button class="leftButton" type="submit">1st Movement</button>
        <div id="arm">
            <img class="armLeft" src="flexing.png"/>
        </div>
        <span class="firstMovement"></span>
    </div> <!--end left column div-->

    <div class="middleColumn">
    <button class="middleButton" type="submit">2nd Movement</button>
    <div id="arm">
        <img class="armMiddle" src="flexing.png"/>
    </div>  
        <span class="secondMovement"></span>
    </div> <!--end middle column div-->

    <div class="rightColumn">
    <button class="rightButton" type="submit">Third Movement</button>
    <div id="arm">
        <img class="armRight" src="flexing.png"/>
    </div> 
        <span class="thirdMovement"></span>
    </div> <!--end right column div--> 
</div>  <!--//ends container div-->

<footer> <!--//contains ajax weather data-->
<div id="current_temp"></div>
<div id="location"></div>
<div class="nice-weather">If the weather's nice, take it outside!</div>
</footer>

<!--Javascript tags below-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>

</body>

</html>

`movement[i+1]`, `movement[j-1]`, or `movement[k+3]` can be outside the array. — Barmar, Jul 13 '17 at 14:56

score 1 · Answer 1 · answered Jul 13 '17 at 14:59

1

The problem is that when you get duplicates between i, j, and k, the indexes you select to replace them may be outside the array.

A simpler way to get 3 different elements from the array is to randomize the array and then take the first 3 elements of it. See How to randomize (shuffle) a JavaScript array? for how to write a shuffle() function that does this.

var movement = shuffle(movement1);
var firstPrintout = movement[0];
var secondPrintout = movement[1];
var thirdPrintout = movement[2];

answered Jul 13 '17 at 14:59

Barmar

741,623
53
500
612

Another good point. I didn't realize the shuffle function even existed. That should solve the issue I imagine. Thanks for the help. – asmatt01 Jul 13 '17 at 15:06
It doesn't exist, you have to copy it from that question. – Barmar Jul 13 '17 at 15:32

score 0 · Answer 2 · answered Jul 13 '17 at 14:46

Tricky one but here's my best guess.

If you get duplicates for the last element in the array and add randomNumber + 1

There's no guarantee that the movement will exist, therefore the output would be null/blank and you'd append nothing.

Here's a code snippet that forces the indexes to be the same.

var movement1 = movement2 = movement3 = [
    "25 Air Squats",
    "15 Burpees",
    "30 Push Ups",
    "50 Sit Ups",
    "25 Lunges",
    "1 minute Forearm Plank",
    "30 Second Max Effort Tuck Jump"  
];


var i = Math.floor(movement1.length);
var j = Math.floor(movement2.length);
var k = Math.floor(movement3.length);

var firstPrintOut = movement1[i+1];
var secondPrintOut = movement2[j-1];
var thirdPrintOut = movement3[k+3];

console.log(firstPrintOut);
console.log(secondPrintOut);
console.log(thirdPrintOut);

Good point. I've been scratching my head over this one. I'll give that a shot. Thanks for the help. — asmatt01, Jul 13 '17 at 14:55

Click Event Handler Only Appending to DOM Occasionally

2 Answers2