Search code examples
javascriptvariablesinputglobal-variableslocal-variables

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

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:

  1. the form stores the users input and writes it to the chat
  2. the form should take height and weight and then calc BMI
  3. 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>

Solution

  • 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>