Javascript 单击仅附加到DOM的事件处理程序
我创建了一个应用程序，它通过JavaScript从数组中随机选择一个移动，将其存储为变量，并通过JQuery click事件处理程序将其附加到HTML中。我考虑到这场运动不会重演，它似乎起了作用。但是，每点击十次左右，移动不会附加到页面上。运行控制台时，我没有看到任何错误，只是元素通常所在的范围中出现了一个空白。我不明白为什么只有十分之一的时间会发生这种情况。代码可以工作，否则就根本不工作。我在下面附上了JavaScript和HTML文件。我甚至尝试过使用switch语句，但没有成功。我对编程还是相当陌生的。可能与三个不同的$document.ready语句有关。也许脚本运行无序，无法执行Javascript 单击仅附加到DOM的事件处理程序,javascript,jquery,Javascript,Jquery,我创建了一个应用程序，它通过JavaScript从数组中随机选择一个移动，将其存储为变量，并通过JQuery click事件处理程序将其附加到HTML中。我考虑到这场运动不会重演，它似乎起了作用。但是，每点击十次左右，移动不会附加到页面上。运行控制台时，我没有看到任何错误，只是元素通常所在的范围中出现了一个空白。我不明白为什么只有十分之一的时间会发生这种情况。代码可以工作，否则就根本不工作。我在下面附上了JavaScript和HTML文件。我甚至尝试过使用switch语句，但没有成功。我对编程还
/*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>
/*即将开始的工作*/
var movement1=movement2=movement3=[
“25次空中蹲坐”，
“15个波比”，
“30个俯卧撑”，
“50个仰卧起坐”，
“25弓箭步”，
“1分钟前臂支撑板”，
“30秒最大用力抱膝跳”
];
var i=Math.floor（Math.random（）*movement1.length）；
var j=Math.floor（Math.random（）*movement2.length）；
var k=Math.floor（Math.random（）*movement3.length）；
//下面的代码块确保移动不会重复
如果（i==j | | i==k | | j==k）{
var firstPrintOut=movement1[i+1]；
var secondPrintOut=movement2[j-1]；
var thirdPrintOut=movement3[k+3]；
}否则{
var firstPrintOut=movement1[i]；
var secondPrintOut=movement2[j]；
var thirdPrintOut=移动3[k]；
}
$（文档）.ready（函数（）{
$（“.leftButton”）。单击（函数（）{
$（“.firstMovement”）.append（第一次打印输出）；
$（“.armLeft”）.slideUp（“fast”）；
$（“.leftButton”）.attr（“disabled”，true）；//单击一次后禁用按钮
});
});
$（文档）.ready（函数（）{
$（“.middleButton”）。单击（函数（）{
$（“.secondMovement”）.append（secondPrintOut）；/。secondMovement是HTML中的类名
$（.armMiddle”）.slideUp（“快速”）；
$（“.middleButton”）.attr（“disabled”，true）；//单击一次后禁用按钮
});
});
$（文档）.ready（函数（）{
$（“.rightButton”）。单击（函数（）{
$（“.thirdMovement”）.append（thirdPrintOut）；//.thirdMovement是HTML中的类名
$（“.armRight”）.slideUp（“fast”）；
$（“.rightButton”）.attr（“disabled”，true）；//单击一次后禁用按钮
});
});
好去
好去
WOD To Go是一款完美的旅行工具，适合那些不能去健身房但仍想进行出色锻炼的人。无论是你的地下室、酒店房间，甚至是海滩，让WOD成为你的教练，决定你今天要做什么运动。
单击每个按钮进行移动。你的训练是每一个动作的组合，无论你喜欢多少次。
第一乐章
第二乐章
第三乐章
如果天气好，就把它带出去！
randomNumber+1var movement1=movement2=movement3=[
“25次空中蹲坐”，
“15个波比”，
“30个俯卧撑”，
“50个仰卧起坐”，
“25弓箭步”，
“1分钟前臂支撑板”，
“30秒最大用力抱膝跳”
];
var i=数学楼层（移动1.长度）；
var j=数学楼层（移动2.长度）；
var k=数学楼层（移动3.长度）；
var firstPrintOut=movement1[i+1]；
var secondPrintOut=movement2[j-1]；
var thirdPrintOut=movement3[k+3]；
console.log（第一次打印输出）；
控制台日志（第二次打印输出）；
控制台日志（第三个输入）ijkshuffle（）var movement = shuffle(movement1);
var firstPrintout = movement[0];
var secondPrintout = movement[1];
var thirdPrintout = movement[2];
说得好。这件事让我抓狂。我要试一试。感谢您的帮助。
movement[i+1]movement[j-1]movement[k+3]