Client side Form function and script not evaluating correctly.

Good day all.

TL;DR: I am having trouble getting an onLoad method to reliably print an evaluated value to a field.

The form is as follows: 

 

Stock message contains: 

<span id='stock_msg'></span>

I have a javascript onLoad method that compares the minimum and current stock:

// Create min and current stock variables
var minStock = document.thisItem.getProperty("_minimum_stock");
var currStock = document.thisItem.getProperty("_current_stock");

// Bring in HTML field span
var field = document.getElementById("stock_msg");
// Create stockMsgValue variable
var stockMsgValue = null;

// if current stock is less than or equals to minimum stock
if(currStock <= minStock)
{
    stockMsgValue = "<p style='color: red'>Not enough Stock!</p>";
} else {
    stockMsgValue = "<p style='color: green'>Stock levels look good</p>";
}

// Write to HTML field span
field.innerHTML += stockMsgValue;

I did something similar with Stock message 2, but included the javascript in the HTML field directly:

<div id="Message"></div>
<div id="min"></div>
<div id="curr"></div>

<script>
var divText = document.getElementById("Message");
var divCurr = document.getElementById("curr");
var divMin = document.getElementById("min");
var currStock = document.thisItem.getProperty("_current_stock");
var minStock = document.thisItem.getProperty("_minimum_stock");

if(currStock <= minStock ) {
    var textVal = "<span style='color: red';>Insufficient</span>";
}
else {
    var textVal = "<span style='color: green';>Sufficient</span>";
}

divText.innerHTML += textVal;
divMin.innerHTML += "Minimum stock: " +minStock;
divCurr.innerHTML += "Current stock: " + currStock;

</script>

The problem is that it works for a little bit, and then the evaluation does not reflect the correct values.

Some examples:

 

Any ideas?

Thanks