Hello,

I was trying to implement a script of a goal thermometer in RSForm! Pro but I'm getting this error in console log : "Uncaught TypeError: Cannot read property 'find' of null".

The script is working locally on my PC but when I tried to implement it in RSForm! Pro its not working.

The thermometer should do its stuff when the fields - Target Goal and Current Raised are filled with numbers and then click Create button.
The thermometer should apply the css effects on the div thermometer.

Here are the codes that I used:

HTML:

<div id="thermo-content">
<div id="thermometer">
<div class="thermo-track">
<div class="goal">
<div class="amount">$1000</div>
</div>
<div class="progress">
<div class="amount">$0</div>
</div>
</div>
</div>
<span class="thermo-btn" target="_blank" >Donate</span>
</div>

<label>Goal: <input type = "text" name = "txtGoal" id = "inputTxtGoal"></label><br /><br />
<label>Current: <input type = "text" name = "txtCurrent" id = "inputTxtCurrent"></label><br /><br />
<button type = "submit" name = "thermSubmit" onclick = "thermometer(inputTxtGoal,inputTxtCurrent);">Create </button>


CSS code :


<style>

/* Thermometer */

#thermo-content {
width:300px;
margin:30px auto;
padding:0;
}

#thermometer {
width:70px;
height:300px;
position: relative;
}

#thermometer .thermo-track {
height:280px;
top:10px;
width:50px;
position: relative;
margin:0 auto;
background: #bfbfbf;
background-position: 0 -1px;
background-size: 100% 5%;
border-radius:3px;
/*border-radius:25px 25px 0 0;*/
}

#thermometer .progress {
height:0%;
width:100%;
background: #00b100;
border-radius:3px;
position: absolute;
bottom:0;
left:0;
}

#thermometer .goal {
position:absolute;
top:0;
width: 150px;
}

#thermometer .amount {
display: inline-block;
padding:0 5px 0 60px;
font-family: Trebuchet MS;
font-weight: bold;
color:#333;
width: 150px;
}

#thermometer .progress .amount {
padding:0 60px 0 5px;
position: absolute;
border-top:1px solid #333;
color:#00b100;
right:0;
}

/* thermo Button */

.thermo-btn{
background: #b20000;
border-radius: 100%;
color: #fff;
display: inline-block;
font-weight: bold;
margin: -19px -5px;
padding: 29px 18px;
text-decoration: none;
}
</style>


Javascript code : <---- Where i think the error is propagating

<script type="text/javascript">
function formatCurrency(n, c, d, t) {
/* "use strict";*/

var s, i, j;

c = isNaN(c = Math.abs(c)) ? 2 : c;
d = d === undefined ? "." : d;
t = t === undefined ? "," : t;

s = n < 0 ? "-" : "";
i = parseInt(n = Math.abs(+n || 0).toFixed(c), 10) + "";
j = (j = i.length) > 3 ? j % 3 : 0;

return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}

function thermometer(goalAmount, progressAmount, animate) {

var goalAmount = document.getElementById("inputTxtGoal").value,
progressAmount = document.getElementById("inputTxtCurrent").value;


var $thermo = $("#thermometer"),
$progress = $(".progress", $thermo),
$goal = $(".goal", $thermo),
percentageAmount;

goalAmount = goalAmount || parseFloat( $goal.text() ),
progressAmount = progressAmount || parseFloat( $progress.text() ),
percentageAmount = Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //make sure we have 1 decimal point


$goal.find(".amount").text( "$" + formatCurrency( goalAmount ) );
$progress.find(".amount").text( "$" + formatCurrency( progressAmount ) );



$progress.find(".amount").hide();
if (animate !== false) {
$progress.animate({
"height": percentageAmount + "%"
}, 1200, function(){
$(this).find(".amount").fadeIn(500);
});
}
else {
$progress.css({
"height": percentageAmount + "%"
});
$progress.find(".amount").fadeIn(500);
}
}

</script>


Here is the screenshot that I'm getting:

prntscr.com/82vllh

Here is a screenshot on how it should be :

prntscr.com/82vm4a

I really need help on this, I would really appreciate your help,Thanks in advance