Can't Access Value of Input Using Global or Local Variable

Question

I'm not able to get the value of the variables height and weight. I made it global and renamed it but it still doesn't working. Quick run down of the code:

the form stores the users input and writes it to the chat
the form should take height and weight and then calc BMI
the form should evaluate height, weight and BMI using test conditions to run second step.

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>

Not related to the problem, but you shouldn't make up custom attributes. Use `data-chat` rather than `chat`. Then you can use the jQuery function `.data()` to set and get it. — Barmar, Feb 03 '19 at 20:54
It looks like you're appending the `height` and `weight` inputs *after* you calculate BMI at the beginning of `chatbox()`. — Barmar, Feb 03 '19 at 21:00
I originally had it within the weight test condition, if(attr= weight) . It will calc BMI but consider height and weight undefined and NAN. — bella, Feb 04 '19 at 00:11

score 0 · Accepted Answer · answered Feb 04 '19 at 16:30

The problem is that you do

weight = $("#weight").val();

at the beginning of chatbox(), before you do:

$('#bmiVal').append('<input type="" class="form-control" id="weight" value="' + weight1 + '">');

Since the input doesn't exist yet, the value is undefined.

You should just use the weight1 variable, there's no need to read it from the input. And move the code that assigns height, weight, and BMI into the final else clause after the weight is validated.

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>

Thanks @Barmar. I originally had those variables located after the else but needed to rename weight = weight1 . Unfortunately the validation test doesn’t work. It properly validates the first condition for BMI but does not validate height. Instead it jumps to the else with document.write(). Any idea why? — bella, Feb 04 '19 at 17:43
Your height validation doesn't have an upper limit. If you enter 500, it matches `else if (height1 >= 68) {`. The tallest man on earth is 97 inches, so `if (height1 >= 68 && height1 < 100)` would be a better condition. — Barmar, Feb 04 '19 at 19:35
I establish ranges in my code “if(height >= 58 && height < 63)”, etc. The issue is that it properly evaluates BMI but not height. This part of the code is nested within the else of if(attr == “weight”). If it recognizes height, weight and BMI it should be able to test what height range was entered and then show one the div’s with class of modeler. — bella, Feb 05 '19 at 00:24
I'm talking about the code inside `if (attr = "height")`. It doesn't check for height being too high, the way that the weight code checks for weight being more than 501. — Barmar, Feb 05 '19 at 00:37
In this example I’m measuring female height 57 - 77 inches and weight 90 - 500 lbs. I set a range for each condition so thats not the issue. The problem is that after the weight and BMI test the following test conditions < else if (BMI >= 23 && BMI < 28) { if (height >= 63 && height < 68){$(‘.modeler5’).show();} > are ignored and it jumps to the else containing the document.write. — bella, Feb 05 '19 at 02:14
I changed all subsequent if conditions to else if’s and the div’s modeler1,2,3... where id’s not classes. Thanks for the feedback, really helpful!! — bella, Feb 05 '19 at 02:23

Can't Access Value of Input Using Global or Local Variable

1 Answers1