jQuery If Statement Message-CodePudding

I have the code set up so that when the user inputs a negative number or an invalid value for the thickness of the pipe (greater than 1/3rd of the diameter), an error message pops up. However, when I enter a valid input, the error message does not go away, and only goes away when updating the value of the outer diameter for the circle. How do I make it so that the moment I enter a valid input for the thickness, the error message goes away, or the moment I delete the invalid input, the error message goes away.

Additionally, I am using this program on an actual webpage with a formidable forms calculator. The size of the circle is taken from the inputs for the calculator as I am trying to create a graphic visual for the user. However, after hitting the "calculate" button, the inputs in the form no longer dynamically change the size of the circle and I have to completely refresh the page to fix the issue. Why is this happening and how do I fix this?

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter   " is too big").show();
      return false;
    }

    if ($outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - "   ($converted)   "px)",
      left: "calc(50% - "   ($converted)   "px)"
    });
    $('.circle').fadeIn(300);
    $('.circles').css({
      height: (2 * $converted)   10,
      width: (2 * $converted)   10
    })
    $('#error').hide();
  })




  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error")
      return false;
    }

    if ($inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    if ($inner_diameter >= 0.33 * $outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      return false;
    }


    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - "   ($converted_2)   "px)",
      left: "calc(50% - "   ($converted_2)   "px)"
    });
    $('.circle2').fadeIn(300);
  })
  $('#error').hide();
});

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circles {
  margin-top: 50px;
  position: relative;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
  position: absolute;
}

.circle2 {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <h1>
      Cutter Calculator
    </h1>
  </div>
  <div >
    <input type="number" id="outer_diameter" placeholder="Enter Outer Diameter"> <br>
    <input type="number" id="inner_diameter" placeholder="Enter Thickness"> <br>
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>

  <div >
    <span ></span>
    <span ></span>
  </div>
  <p id="error">

  </p>
</div>

jsFiddle: https://jsfiddle.net/Kaevonz/6rc9jbo3/105/

CodePudding user response：

The problem is that you have $('#error').hide(); outside the $('#inner_diameter').on('change', function() { so, if you change the function like this:

$('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error")
      return false;
    }

    if ($inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    if ($inner_diameter >= 0.33 * $outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      return false;
    }


    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - "   ($converted_2)   "px)",
      left: "calc(50% - "   ($converted_2)   "px)"
    });
    $('.circle2').fadeIn(300);
    $('#error').hide();
  })

works like you desire

For the second question, you don't have a onclick event binding the Calculate button...

Something like that:

$('#bttn').on('click', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter   " is too big").show();
      return false;
    }

    if ($outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }
    
    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - "   ($converted)   "px)",
      left: "calc(50% - "   ($converted)   "px)"
    });
    $('.circle').fadeIn(300);
    $('.circles').css({
      height: (2 * $converted)   10,
      width: (2 * $converted)   10
    })

    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - "   ($converted_2)   "px)",
      left: "calc(50% - "   ($converted_2)   "px)"
    });
    $('.circle2').fadeIn(300);
    $('#error').hide();
    });

You can extract some methods for avoiding duplication