我无法获取变量height和weight的值。我将其全局设置并重命名，但仍然无法正常工作。快速运行代码：
var arr = "";
jQuery(document).ready(function() {
//Answer in the input Form
jQuery('#modal-form').submit(function(e) {
e.preventDefault();
var attr = $("#form-input").attr("chat");
var form_input = $('#form-input').val().toLowerCase();
chatbox(attr, form_input);
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
$("#form-input").val("");
});
function chatbox(attr, input) {
//height and weight variables
height = $('#height').val();
weight = $('#weight').val();
BMI = (weight * 0.45) / ((height * .025) * (height * .025));
if (attr == "gender") {
if (input == "male" || input == "female") {
$("#form-input").attr("chat", "fname");
$('#question2').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
setTimeout(function() {
$("#question2").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
arr = "gender:" + input + "," + arr;
if (input == "male") {
setTimeout(function() {
$('#question2').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Response set to male.</label></div></div><div class="clearfix"></div></div>');
}, 1500);
}
} else {
$('#question2').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
setTimeout(function() {
$('#question2').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I do not recognize your input. Please say <b>female</b> or <b>male</b>.</label></div></div><div class="clearfix"></div></div>');
}, 1500);
}
}
if (attr == "fname") {
if (input.length < 3) {
$('#question3').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Please enter your full name</label></div></div><div class="clearfix"></div></div>');
} else {
$("#form-input").attr("chat", "height");
$('#question3').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#question3').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Cool name, ' + input + '.</label></div></div><div class="clearfix"></div></div>');
$(".col-md-9").scrollTop($('.col-md-9')[0].scrollHeight);
setTimeout(function() {
$("#question3").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
arr = "name:" + input + "," + arr;
return false;
}
}
if (attr == "height") {
var height1 = input.match(/\d+/g);
if (height1 >= 58 && height1 <= 62.99) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else if (height1 >= 63 && height1 < 68) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else if (height1 >= 68) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else {
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#question4').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I only recognize height metrics in inches. Follow these links to convert <a href="">feet</a> or <a href="">meters</a> to inches.</label></div></div><div class="clearfix"></div></div>');
}
}
if (attr == "weight") {
var weight1 = input.match(/\d+/g);
if (input < 91 || input > 501) {
$('#question5').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I do not recognize your entry. Please enter a weight between 90 - 500 pounds.</label></div></div><div class="clearfix"></div></div>');
} else {
$('#bmiVal').append('<input type="" class="form-control" id="weight" value="' + weight1 + '">');
if (BMI >= 19 && BMI < 23) {
if (height >= 58 && height < 63) {
$('.modeler1').show();
}
if (height >= 63 && height < 68) {
$('.modeler2').show();
}
if (height >= 68 && height < 77) {
$('.modeler3').show();
} else {
document.write('low BMI' + weight)
}
} else if (BMI >= 23 && BMI < 28) {
if (height >= 58 && height < 63) {
$('.modeler4').show();
}
if (height >= 63 && height < 68) {
$('.modeler5').show();
}
if (height >= 68 && height < 77) {
$('.modeler6').show();
} else {
document.write('average BMI')
}
} else if (BMI >= 28 && BMI < 34) {
if (height >= 58 && height < 63) {
$('.modeler7').show();
}
if (height >= 63 && height < 68) {
$('.modeler8').show();
}
if (height >= 68 && height < 77) {
$('.modeler9').show();
} else {
document.write('plus BMI')
}
} else if (BMI >= 34 && BMI < 40) {
if (height >= 58 && height < 63) {
$('.modeler10').show();
}
if (height >= 63 && height < 68) {
$('.modeler11').show();
}
if (height >= 68 && height < 77) {
$('.modeler12').show();
} else {
document.write('obese BMI')
}
} else {
$('#question5').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Hmmm, this is odd. Your BMI is: ' + BMI + ' and your height is:' + height + ' and your weight is:' + weight + '.</label></div></div><div class="clearfix"></div></div>');
}
}
}
}
});body {
background-color: fff;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
margin: 50px 0 5px 0;
text-align: center;
font-size: 14px;
}
.right-float {
float: right;
width: 55%;
padding: 0 20px;
}
.left-float {
float: left;
width: 40%;
height: 560px;
max-height: 560px;
padding: 0 20px;
border-radius: 0;
padding: 0;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
h1 {
color: #000;
}
.modeler {}
.model-wrap {
float: left;
width: 60%;
border: solid 2px red;
min-height: 600px;
}
.hide {
display: none;
}
.button-wrap {
display: flex;
justify-content: center;
float: left;
}
.buttonOn {
width: 94px;
padding: 8px 0;
text-align: center;
font-size: 12px;
background-color: rgb(214, 70, 4);
color: black;
border-radius: 4px;
}
#form-input {
padding: 9px;
width: 325px;
border-radius: 4px;
}
.col-md-9 {
float: right;
width: 70%;
height: 400px !important;
max-height: 400px !important;
min-height: 400px;
font-size: 14px;
overflow-y: scroll;
padding-right: 6px;
}
.btn1 {
outline: none;
line-height: 1;
padding: 9px;
width: 110px;
border-radius: 3px;
background-color: rgb(204, 79, 33);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#modal-form {
position: relative;
top: 30px;
}
.ar-label {
color: #fff;
}
.talk-bubble {
display: inline-block;
position: relative;
height: auto;
background-color: #990000;
margin-bottom: 20px;
}
.tri-right.border.btm-left:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -8px;
right: auto;
top: auto;
bottom: -40px;
border: 32px solid;
border-color: transparent transparent transparent #940A0A;
}
.tri-right.btm-left:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
right: auto;
top: auto;
bottom: -20px;
border: 22px solid;
border-color: transparent transparent transparent #990000;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
.border {
border: 8px solid #666;
}
.round {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
.modal-box input[type="text"],
.modal-box input[type="email"],
.modal-box input[type="password"],
.modal-box select {
/* padding: 0 0 15px;*/
border-width: 0 0 1px;
background: #000;
border-color: #000;
color: #f5f5f5;
height: 40px;
margin-bottom: 20px;
}
.modal-body {
padding: 30px;
}
.modal-body {
border-top: 5px solid transparent;
}
.reply-box {
margin: 10px 0px 10px 5px;
padding: 6px 20px;
float: right;
border: 2px solid #d8d6d6;
background: #f7b9b9;
border-radius: 10px;
width: 80%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!----- dialog start ------->
<div class="left-float">
<div id="onpageload" class="modal fade myModal in">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body secondary-font">
<div class="col-md-3" id="sophia">
<img id="sophia-img" src="sophia.png" />
</div>
<div class="col-md-9">
<div id="modal-sd-cont" class="para-cont">
<div class="form-group" id="question1">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Hi there guest visitor! Are you female, male or non-binary?</label>
</div>
</div>
</div>
<div class="form-group" id="question2" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
What is your name?
</label>
</div>
</div>
</div>
<div class="form-group" id="question3" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Please enter your height in inches. For example you can say 64 inches.
</label>
</div>
</div>
</div>
<div class="form-group" id="question4" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
What is your weight in pounds?
</label>
</div>
</div>
</div>
<div class="form-group" id="question5" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Thank you for that information.
</label>
</div>
</div>
</div>
</div>
<!----- end modal-sd-cont --->
</div>
<!---- end col-md-9 ------>
<form class="registration" id="modal-form"><br><br>
<div class="input-group" id="modalform">
<input type="text" id="form-input" chat="gender" autofocus name="" value="" placeholder="Enter your response here" class="form-control" aria-describedby="basic-addon2">
<span class="input-group-addon pad-0 bg-none" id="basic-addon2">
<button class="btn1" id="modal-convo">Enter</button>
</span>
</div>
</form>
<form id="bmiVal"> </form>
</div>
</div>
</div>
</div>
</div>
<div class="right-float" class="hide">
<h2 style="text-align: center">Body Modeler</h2>
<div id="shapeme" class="">
<div id="modeler1" class="hide modeler">
<h1>Success: Skinny Average</h1>>
</div>
<div id="modeler2" class="hide modeler">
<h1>Success: Skinny Average</h1>
</div>
<div id="modeler3" class="hide modeler">
<h1>Success: Skinny Tall</h1>
</div>
<div id="modeler4" class="hide modeler">
<h1>Success: Average Short</h1>
</div>
<div id="modeler5" class="hide modeler">
<h1>Success: Average Average</h1>
</div>
<div id="modeler6" class="hide modeler">
<h1>Success: Average Tall</h1>
</div>
<div id="modeler7" class="hide modeler">
<h1>Success: Plus Short</h1>
</div>
<div id="modeler8" class="hide modeler">
<h1>Success: Plus Average</h1>
</div>
<div id="modeler9" class="hide modeler">
<h1>Success: Plus Tall</h1>
</div>
<div id="modeler10" class="hide modeler">
<h1>Success: Obese Short</h1>
</div>
<div id="modeler11" class="hide modeler">
<h1>Success: Obese Average</h1>
</div>
<div id="modeler12" class="hide modeler">
<h1>Success: Obese Tall</h1>
</div>
</div>
<!---end shapeme --->
</div>
<!--- end right float --->
</body>
</html>
答案 0 :(得分：0)
问题是您这样做
weight = $("#weight").val();
在chatbox()开头，然后再做
$('#bmiVal').append('<input type="" class="form-control" id="weight" value="' + weight1 + '">');
由于输入尚不存在，因此该值未定义。
您应该只使用weight1变量，无需从输入中读取它。验证权重后，将分配height，weight和BMI的代码移到最后的else子句中。
var arr = "";
jQuery(document).ready(function() {
//Answer in the input Form
jQuery('#modal-form').submit(function(e) {
e.preventDefault();
var attr = $("#form-input").attr("chat");
var form_input = $('#form-input').val().toLowerCase();
chatbox(attr, form_input);
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
$("#form-input").val("");
});
function chatbox(attr, input) {
//height and weight variables
if (attr == "gender") {
if (input == "male" || input == "female") {
$("#form-input").attr("chat", "fname");
$('#question2').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
setTimeout(function() {
$("#question2").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
arr = "gender:" + input + "," + arr;
if (input == "male") {
setTimeout(function() {
$('#question2').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Response set to male.</label></div></div><div class="clearfix"></div></div>');
}, 1500);
}
} else {
$('#question2').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
setTimeout(function() {
$('#question2').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I do not recognize your input. Please say <b>female</b> or <b>male</b>.</label></div></div><div class="clearfix"></div></div>');
}, 1500);
}
}
if (attr == "fname") {
if (input.length < 3) {
$('#question3').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Please enter your full name</label></div></div><div class="clearfix"></div></div>');
} else {
$("#form-input").attr("chat", "height");
$('#question3').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#question3').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Cool name, ' + input + '.</label></div></div><div class="clearfix"></div></div>');
$(".col-md-9").scrollTop($('.col-md-9')[0].scrollHeight);
setTimeout(function() {
$("#question3").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
arr = "name:" + input + "," + arr;
return false;
}
}
if (attr == "height") {
var height1 = input.match(/\d+/g);
if (height1 >= 58 && height1 <= 62.99) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else if (height1 >= 63 && height1 < 68) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else if (height1 >= 68) {
$("#form-input").attr("chat", "weight");
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#bmiVal').append('<input type="" class="form-control" id="height" value="' + height1 + '">');
setTimeout(function() {
$("#question4").show();
$(".para-cont").animate({
scrollTop: $('.para-cont').prop("scrollHeight")
}, 1000);
}, 1500);
} else {
$('#question4').before('<div class="reply-box" ><p>' + input + '</p></div><div class="clearfix"></div><br>');
$('#question4').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I only recognize height metrics in inches. Follow these links to convert <a href="">feet</a> or <a href="">meters</a> to inches.</label></div></div><div class="clearfix"></div></div>');
}
}
if (attr == "weight") {
var weight1 = input.match(/\d+/g);
if (weight1 < 91 || weight1 > 501) {
$('#question5').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">I do not recognize your entry. Please enter a weight between 90 - 500 pounds.</label></div></div><div class="clearfix"></div></div>');
} else {
$('#bmiVal').append('<input type="" class="form-control" id="weight" value="' + weight1 + '">');
var height = $('#height').val();
var weight = weight1;
var BMI = (weight * 0.45) / ((height * .025) * (height * .025));
if (BMI >= 19 && BMI < 23) {
if (height >= 58 && height < 63) {
$('.modeler1').show();
}
if (height >= 63 && height < 68) {
$('.modeler2').show();
}
if (height >= 68 && height < 77) {
$('.modeler3').show();
} else {
document.write('low BMI' + weight)
}
} else if (BMI >= 23 && BMI < 28) {
if (height >= 58 && height < 63) {
$('.modeler4').show();
}
if (height >= 63 && height < 68) {
$('.modeler5').show();
}
if (height >= 68 && height < 77) {
$('.modeler6').show();
} else {
document.write('average BMI')
}
} else if (BMI >= 28 && BMI < 34) {
if (height >= 58 && height < 63) {
$('.modeler7').show();
}
if (height >= 63 && height < 68) {
$('.modeler8').show();
}
if (height >= 68 && height < 77) {
$('.modeler9').show();
} else {
document.write('plus BMI')
}
} else if (BMI >= 34 && BMI < 40) {
if (height >= 58 && height < 63) {
$('.modeler10').show();
}
if (height >= 63 && height < 68) {
$('.modeler11').show();
}
if (height >= 68 && height < 77) {
$('.modeler12').show();
} else {
document.write('obese BMI')
}
} else {
$('#question5').before('<div class="form-group" ><div class="talk-bubble tri-right round btm-left"><div class="talktext"><label class="ar-label">Hmmm, this is odd. Your BMI is: ' + BMI + ' and your height is:' + height + ' and your weight is:' + weight + '.</label></div></div><div class="clearfix"></div></div>');
}
}
}
}
});body {
background-color: fff;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
margin: 50px 0 5px 0;
text-align: center;
font-size: 14px;
}
.right-float {
float: right;
width: 55%;
padding: 0 20px;
}
.left-float {
float: left;
width: 40%;
height: 560px;
max-height: 560px;
padding: 0 20px;
border-radius: 0;
padding: 0;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
h1 {
color: #000;
}
.modeler {}
.model-wrap {
float: left;
width: 60%;
border: solid 2px red;
min-height: 600px;
}
.hide {
display: none;
}
.button-wrap {
display: flex;
justify-content: center;
float: left;
}
.buttonOn {
width: 94px;
padding: 8px 0;
text-align: center;
font-size: 12px;
background-color: rgb(214, 70, 4);
color: black;
border-radius: 4px;
}
#form-input {
padding: 9px;
width: 325px;
border-radius: 4px;
}
.col-md-9 {
float: right;
width: 70%;
height: 400px !important;
max-height: 400px !important;
min-height: 400px;
font-size: 14px;
overflow-y: scroll;
padding-right: 6px;
}
.btn1 {
outline: none;
line-height: 1;
padding: 9px;
width: 110px;
border-radius: 3px;
background-color: rgb(204, 79, 33);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#modal-form {
position: relative;
top: 30px;
}
.ar-label {
color: #fff;
}
.talk-bubble {
display: inline-block;
position: relative;
height: auto;
background-color: #990000;
margin-bottom: 20px;
}
.tri-right.border.btm-left:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -8px;
right: auto;
top: auto;
bottom: -40px;
border: 32px solid;
border-color: transparent transparent transparent #940A0A;
}
.tri-right.btm-left:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
right: auto;
top: auto;
bottom: -20px;
border: 22px solid;
border-color: transparent transparent transparent #990000;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
.border {
border: 8px solid #666;
}
.round {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
.modal-box input[type="text"],
.modal-box input[type="email"],
.modal-box input[type="password"],
.modal-box select {
/* padding: 0 0 15px;*/
border-width: 0 0 1px;
background: #000;
border-color: #000;
color: #f5f5f5;
height: 40px;
margin-bottom: 20px;
}
.modal-body {
padding: 30px;
}
.modal-body {
border-top: 5px solid transparent;
}
.reply-box {
margin: 10px 0px 10px 5px;
padding: 6px 20px;
float: right;
border: 2px solid #d8d6d6;
background: #f7b9b9;
border-radius: 10px;
width: 80%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!----- dialog start ------->
<div class="left-float">
<div id="onpageload" class="modal fade myModal in">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body secondary-font">
<div class="col-md-3" id="sophia">
<img id="sophia-img" src="sophia.png" />
</div>
<div class="col-md-9">
<div id="modal-sd-cont" class="para-cont">
<div class="form-group" id="question1">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Hi there guest visitor! Are you female, male or non-binary?</label>
</div>
</div>
</div>
<div class="form-group" id="question2" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
What is your name?
</label>
</div>
</div>
</div>
<div class="form-group" id="question3" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Please enter your height in inches. For example you can say 64 inches.
</label>
</div>
</div>
</div>
<div class="form-group" id="question4" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
What is your weight in pounds?
</label>
</div>
</div>
</div>
<div class="form-group" id="question5" style="display:none;">
<div class="talk-bubble tri-right round btm-left">
<div class="talktext">
<label class="ar-label">
Thank you for that information.
</label>
</div>
</div>
</div>
</div>
<!----- end modal-sd-cont --->
</div>
<!---- end col-md-9 ------>
<form class="registration" id="modal-form"><br><br>
<div class="input-group" id="modalform">
<input type="text" id="form-input" chat="gender" autofocus name="" value="" placeholder="Enter your response here" class="form-control" aria-describedby="basic-addon2">
<span class="input-group-addon pad-0 bg-none" id="basic-addon2">
<button class="btn1" id="modal-convo">Enter</button>
</span>
</div>
</form>
<form id="bmiVal"> </form>
</div>
</div>
</div>
</div>
</div>
<div class="right-float" class="hide">
<h2 style="text-align: center">Body Modeler</h2>
<div id="shapeme" class="">
<div id="modeler1" class="hide modeler">
<h1>Success: Skinny Average</h1>>
</div>
<div id="modeler2" class="hide modeler">
<h1>Success: Skinny Average</h1>
</div>
<div id="modeler3" class="hide modeler">
<h1>Success: Skinny Tall</h1>
</div>
<div id="modeler4" class="hide modeler">
<h1>Success: Average Short</h1>
</div>
<div id="modeler5" class="hide modeler">
<h1>Success: Average Average</h1>
</div>
<div id="modeler6" class="hide modeler">
<h1>Success: Average Tall</h1>
</div>
<div id="modeler7" class="hide modeler">
<h1>Success: Plus Short</h1>
</div>
<div id="modeler8" class="hide modeler">
<h1>Success: Plus Average</h1>
</div>
<div id="modeler9" class="hide modeler">
<h1>Success: Plus Tall</h1>
</div>
<div id="modeler10" class="hide modeler">
<h1>Success: Obese Short</h1>
</div>
<div id="modeler11" class="hide modeler">
<h1>Success: Obese Average</h1>
</div>
<div id="modeler12" class="hide modeler">
<h1>Success: Obese Tall</h1>
</div>
</div>
<!---end shapeme --->
</div>
<!--- end right float --->
</body>
</html>