Javascript only works when page is refreshed

I have just finished making a form that uses some javascript to display a total for the number of checkboxes checked. The script only seems to work when the page is refreshed, but is inactive when the page initially loads. Have I placed the code somewhere that it is not being initialised when the page is loaded?

The page is located at: https://tracytredoux.com/journal-posts/blood-sugar-quiz

I have attached the code below, which is all contained in a Squarespace code block, within a blog post.

Another smaller issue is that the color attribute in the legend style isn’t working. It worked fine when I tried the code on a test page, but when I cut and paste to here it has no effect.

Thanks.

<script>
$(function() {
  $("input[name*='symptom']").on("change", function() {
    var total = 0;
    $("input[type='checkbox']:checked").each(function() {
      total += Number($(this).val());
    });
    $("#total").val(total);
  });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  legend
  {
    color:#a81918;
    padding-left:4px;
    padding-right:4px;
  }
fieldset
  {
    border:1px solid #a81918;
    -moz-border-radius:8px;
        -webkit-border-radius:8px;	
    border-radius:8px;

  }
</style>

<form action="">
  <fieldset>
<legend>
  <span style="color:#6a6a6a"> Select the symptoms that apply to you </span>
  </legend>
  <input type="checkbox" name="symptom1" value="1" id="cravings">
<label for="cravings">Cravings for carbs, sugar and caffeine</label><br> 
  <input type="checkbox" name="symptom2" value="1" id="swelling">
<label for="swelling">Excess swelling</label><br>
  <input type="checkbox" name="symptom3" value="1" id="fatigue">
<label for="fatigue">Fatigue: relieved by eating</label><br>
   <input type="checkbox" name="symptom4" value="1" id="feel-off">
<label for="feel-off">Feel 'off' when you have not eaten</label><br>
   <input type="checkbox" name="symptom5" value="1" id="nervous">
<label for="nervous">Feeling nervous</label><br>
   <input type="checkbox" name="symptom6" value="1" id="hangry">
<label for="hangry">'Hangry' between meals</label><br>
   <input type="checkbox" name="symptom7" value="1" id="headaches">
<label for="headaches">Headaches</label><br>
   <input type="checkbox" name="symptom8" value="1" id="dizzy">
<label for="dizzy">Lightheaded, dizzy, or foggy brain</label><br>
   <input type="checkbox" name="symptom9" value="1" id="nausea">
<label for="nausea">Nausea</label><br>
   <input type="checkbox" name="symptom10" value="1" id="focus">
<label for="focus">Difficulty focussing</label><br>
   <input type="checkbox" name="symptom11" value="1" id="lethargy">
<label for="lethargy">Fatigue and lethargy</label><br>
   <input type="checkbox" name="symptom12" value="1" id="cravings2">
<label for="cravings2">Food cravings, not satisfied by eating</label><br>
   <input type="checkbox" name="symptom14" value="1" id="hunger">
<label for="hunger">Hunger, even after eating</label><br>
   <input type="checkbox" name="symptom15" value="1" id="thirst">
<label for="thirst">Increased thirst</label><br>
   <input type="checkbox" name="symptom16" value="1" id="fat">
<label for="fat">Mid-belly fat</label><br>
   <input type="checkbox" name="symptom17" value="1" id="vision">
<label for="vision">Vision disturbances</label><br><br>
    Total <input type="text" value="0" id="total">
  </fieldset>
</form>

Try switching the order of your two script tags. It currently looks like your first script is trying to use the second before it’s fully loaded.

Thanks for the suggestion. I tried this but it doesn’t seem to make a difference.

I’ve just gone to your page on my iPad (Safari) and the calculation seems to be working just fine for me with no need to refresh the page.

Maybe clear your cache and give it another go?

Try <script defer type=“text/javascript” etc.