How can I fix Uncaught ReferenceError: grabText is not defined?

    <style>
 .column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns *
.row:after {
content: "";
display: table;
clear: both;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Centered text */
.centered {
text-shadow: 0 0 2px, 0 0 5px, 0 0 50px, 0 0 10px, 0 0 60px, 0 0 60px;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
<h1>DESIGN YOUR OWN VIBE</h1>
<h3>Type in your message, choose font, and color.</h3>
<div class="column">
<div class="container">
<img style="box-shadow: 5px 5px 10px black;" src="https://omgneonsigns.com/wp-content/plugins/neon-designer-1.5.4/includes/image/background1.jpg" />
<div class="centered">
<p id="text" style="font-size: 45px; padding-right: 10px;"></p>
</div>
</div>
<h1>Total Cost:<span id="outputCost" style="font-size: 25px; padding-right: 10px;"></span></h1>
</div>
<div class="column" style="box-shadow: 5px 2px 55px gray;">
<h3>INPUT TEXT</h3>
<form action="/cart/?add-to-cart=5825" method="post" name="contentForm">
<p id="remainingChars"></p>
<textarea id="enteredText" style="height: 15px;" name="enteredText" onkeyup="grabText()" onkeydown="countChars(this)" placeholder="Your Text..."></textarea>
<input id="hiddenText" name="hiddenText" type="hidden" value=""></input>
<h3>CHOOSE FONT</h3>
<select name="chosenFont" onchange="changeFontStyle(this)">
<option value="select">-SELECT-</option>
<option style="font-family: 'roboto';" value="roboto">Roboto</option>
<option style="font-family: 'arial';" value="arial">Arial</option>
<option style="font-family: 'times new roman';" value="times new roman">Times New Roman</option>
<option style="font-family: 'comic sans ms';" value="comic sans ms">Comic Sans MS</option>
<option style="font-family: 'clarendon-fortune-bold';" value="clarendon fortune bold">Clarendon Fortune</option>
<option style="font-family: 'copperplate';" value="copperplate">Copperplate</option>
<option style="font-family: 'ribbon-condensed';" value="ribbon condensed">Ribbon Condensed</option>
</select>
<input id="hiddenFont" name="hiddenFont" type="hidden" value=""></input>
<h3>CHOOSE COLOR</h3>
<select id="selectedColor" name="chosenColor" onchange="changeColorStyle(this)">
<option value="select">-SELECT-</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="#dce6ef">Ice Blue</option>
</select>
<input id="hiddenColor" name="hiddenColor" type="hidden" value="" />
<h3>CHOOSE SIZE</h3>
<select id="selectedSize" name="chosenSize" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="20">20"</option>
<option value="30">30"</option>
<option value="40">40"</option>
<option value="50">50"</option>
<option value="60">60"</option>
</select>
<input id="hiddenSize" name="hiddenSize" type="hidden" value="" />
<h3>CHOOSE POWER WIRE</h3>
Power wire on back is recommended for professional installation by an electrician. Power wire on front is recommended for residential installation.
<select id="selectedPowerWire" name="chosenPower" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="front">Power Wire In FRONT</option>
<option value="back">Power Wire In BACK</option>
</select>
<input id="hiddenPowerWire" name="hiddenPowerWire" type="hidden" value="" />
<h3>CHOOSE MOUNT</h3>
Wall mount is recommended for general installations. Hanging is recommended for window display.
<select id="selectedMount" name="chosenMount" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="wall mount">Wall Mount</option>
<option value="hanging">Hanging</option>
<option value="stand">Stand</option>
</select>
<input id="hiddenMount" name="hiddenMount" type="hidden" value="" />
<h3>CHOOSE BACKING</h3>
<select id="selectedBacking" name="chosenBacking" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="cut to shape">Cut To Shape</option>
<option value="whole board">Whole Board</option>
</select>
<input id="hiddenBacking" name="hiddenBacking" type="hidden" value="" />
<h3>DIMMER?</h3>
<select id="selectedDimmer" name="chosenDimmer" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="yes">Yes ($50.00)</option>
<option value="no">No</option>
</select>
<input id="hiddenDimmer" name="hiddenDimmer" type="hidden" value="" />
<input id="price" name="price" type="hidden" value="" />
<input id="hiddenChars" name="hiddenChars" type="hidden" value="" />
<input type="submit" id="submitValues" value="Add To Cart" />
</form></div>
<script type="text/javascript">
$(document).ready(function grabText() {
  var x = document.getElementById("enteredText").value;
  document.getElementById("text").innerHTML = x;
getTotal();
});
var changeFontStyle = function (font) {
          document.getElementById(
                "text").style.fontFamily
                        = font.value;
};
var changeColorStyle = function (color) {
    document.getElementById("text").style.color = color.value;
};
$(document).ready(function countChars(obj){
    var maxLength = 20;
    var strLength = obj.value.length + 1;
    var charRemain = (maxLength - strLength);
    document.getElementById("hiddenChars").value = strLength;
    if(charRemain < 0){
        document.getElementById("remainingChars").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
    }else{
        document.getElementById("remainingChars").innerHTML = charRemain+' characters remaining';
    }
});
$(document).ready(function getTotal() {
  var z = document.getElementById("hiddenChars").value;
  var x = document.getElementById("selectedSize").value;
  var y = document.getElementById("selectedMount").value;
  var d = document.getElementById("selectedDimmer").value;
if(x != "select" && z === "") {
  document.getElementById("outputCost").innerHTML = ' Please enter custom text.';
  document.getElementById("price").value = NULL;
  document.getElementById("submitValues").disabled = true;
}
if(x === "20" && z === "1") {
   document.getElementById("outputCost").innerHTML = ' $180';
   document.getElementById("price").value = parseFloat("180.00");
 }
if(x === "30" && z === "1") {
   document.getElementById("outputCost").innerHTML = ' $263';
   document.getElementById("price").value = parseFloat("263.00");
 }
if(x === "40" && z === "1") {
   document.getElementById("outputCost").innerHTML = ' $306';
   document.getElementById("price").value = parseFloat("306.00");
 }
if(x === "50" && z === "1") {
   document.getElementById("outputCost").innerHTML = ' $330';
   document.getElementById("price").value = parseFloat("330.00");
 }
if(x === "60" && z === "1") {
   document.getElementById("outputCost").innerHTML = ' $380';
   document.getElementById("price").value = parseFloat("380.00");
 }
if(x === "20" && z === "2") {
   document.getElementById("outputCost").innerHTML = ' $200';
   document.getElementById("price").value = parseFloat("200.00");
 }
if(x === "30" && z === "2") {
   document.getElementById("outputCost").innerHTML = ' $286';
   document.getElementById("price").value = parseFloat("286.00");
 }
if(x === "40" && z === "2") {
   document.getElementById("outputCost").innerHTML = ' $332';
   document.getElementById("price").value = parseFloat("332.00");
 }
if(x === "50" && z === "2") {
   document.getElementById("outputCost").innerHTML = ' $360';
   document.getElementById("price").value = parseFloat("360.00");
 }
if(x === "60" && z === "2") {
   document.getElementById("outputCost").innerHTML = ' $410';
   document.getElementById("price").value = parseFloat("410.00");
 }
if(x === "20" && z === "3") {
   document.getElementById("outputCost").innerHTML = ' $220';
   document.getElementById("price").value = parseFloat("220.00");
 }
if(x === "30" && z === "3") {
   document.getElementById("outputCost").innerHTML = ' $309';
   document.getElementById("price").value = parseFloat("309.00");
 }
if(x === "40" && z === "3") {
   document.getElementById("outputCost").innerHTML = ' $358';
   document.getElementById("price").value = parseFloat("358.00");
 }
if(x === "50" && z === "3") {
   document.getElementById("outputCost").innerHTML = ' $480';
   document.getElementById("price").value = parseFloat("480.00");
 }
if(x === "60" && z === "3") {
   document.getElementById("outputCost").innerHTML = ' $440';
   document.getElementById("price").value = parseFloat("440.00");
 }
if(x === "20" && z === "4") {
   document.getElementById("outputCost").innerHTML = ' $240';
   document.getElementById("price").value = parseFloat("240.00");
 }
if(x === "30" && z === "4") {
   document.getElementById("outputCost").innerHTML = ' $332';
   document.getElementById("price").value = parseFloat("332.00");
 }
if(x === "40" && z === "4") {
   document.getElementById("outputCost").innerHTML = ' $384';
   document.getElementById("price").value = parseFloat("384.00");
 }
if(x === "50" && z === "4") {
   document.getElementById("outputCost").innerHTML = ' $580';
   document.getElementById("price").value = parseFloat("580.00");
 }   
if(x === "60" && z === "4") {
   document.getElementById("outputCost").innerHTML = ' $470';
   document.getElementById("price").value = parseFloat("470.00");
 }
if(x === "20" && z === "5") {
   document.getElementById("outputCost").innerHTML = ' $260';
   document.getElementById("price").value = parseFloat("260.00");
 }
if(x === "30" && z === "5") {
   document.getElementById("outputCost").innerHTML = ' $355';
   document.getElementById("price").value = parseFloat("355.00");
 }
if(x === "40" && z === "5") {
   document.getElementById("outputCost").innerHTML = ' $410';
   document.getElementById("price").value = parseFloat("410.00");
 }
if(x === "50" && z === "5") {
   document.getElementById("outputCost").innerHTML = ' $458';
   document.getElementById("price").value = parseFloat("458.00");
 }
if(x === "60" && z === "5") {
   document.getElementById("outputCost").innerHTML = ' $500';
   document.getElementById("price").value = parseFloat("500.00");
 }
if(x === "20" && z === "6") {
   document.getElementById("outputCost").innerHTML = ' $280';
   document.getElementById("price").value = parseFloat("280.00");
 }
if(x === "30" && z === "6") {
   document.getElementById("outputCost").innerHTML = ' $378';
   document.getElementById("price").value = parseFloat("378.00");
 }
if(x === "40" && z === "6") {
   document.getElementById("outputCost").innerHTML = ' $436';
   document.getElementById("price").value = parseFloat("436.00");
 }
if(x === "50" && z === "6") {
   document.getElementById("outputCost").innerHTML = ' $558';
   document.getElementById("price").value = parseFloat("558.00");
 }
if(x === "60" && z === "6") {
   document.getElementById("outputCost").innerHTML = ' $530';
   document.getElementById("price").value = parseFloat("530.00");
 }
if(x === "20" && z === "7") {
   document.getElementById("outputCost").innerHTML = ' $300';
   document.getElementById("price").value = parseFloat("300.00");
 }
if(x === "30" && z === "7") {
   document.getElementById("outputCost").innerHTML = ' $401';
   document.getElementById("price").value = parseFloat("401.00");
 }
if(x === "40" && z === "7") {
   document.getElementById("outputCost").innerHTML = ' $462';
   document.getElementById("price").value = parseFloat("462.00");
 }  
if(x === "50" && z === "7") {
   document.getElementById("outputCost").innerHTML = ' $436';
   document.getElementById("price").value = parseFloat("436.00");
 }
if(x === "60" && z === "7") {
   document.getElementById("outputCost").innerHTML = ' $560';
   document.getElementById("price").value = parseFloat("560.00");
 }
if(x === "20" && z === "8") {
   document.getElementById("outputCost").innerHTML = ' $320';
   document.getElementById("price").value = parseFloat("320.00");
 }
if(x === "30" && z === "8") {
   document.getElementById("outputCost").innerHTML = ' $424';
   document.getElementById("price").value = parseFloat("424.00");
 }
if(x === "40" && z === "8") {
   document.getElementById("outputCost").innerHTML = ' $488';
   document.getElementById("price").value = parseFloat("488.00");
 }
if(x === "50" && z === "8") {
   document.getElementById("outputCost").innerHTML = ' $536';
   document.getElementById("price").value = parseFloat("536.00");
 }
if(x === "60" && z === "8") {
   document.getElementById("outputCost").innerHTML = ' $590';
   document.getElementById("price").value = parseFloat("590.00");
 }
if(x === "20" && z === "9") {
   document.getElementById("outputCost").innerHTML = ' $340';
   document.getElementById("price").value = parseFloat("340.00");
 }
if(x === "30" && z === "9") {
   document.getElementById("outputCost").innerHTML = ' $447';
   document.getElementById("price").value = parseFloat("447.00");
 }
if(x === "40" && z === "9") {
   document.getElementById("outputCost").innerHTML = ' $514';
   document.getElementById("price").value = parseFloat("514.00");
 }
if(x === "50" && z === "9") {
   document.getElementById("outputCost").innerHTML = ' $636';
   document.getElementById("price").value = parseFloat("636.00");
 }
if(x === "60" && z === "9") {
   document.getElementById("outputCost").innerHTML = ' $620';
   document.getElementById("price").value = parseFloat("620.00");
 }
if(x === "20" && z === "10") {
   document.getElementById("outputCost").innerHTML = ' $360';
   document.getElementById("price").value = parseFloat("360.00");
 }
if(x === "30" && z === "10") {
   document.getElementById("outputCost").innerHTML = ' $470';
   document.getElementById("price").value = parseFloat("470.00");
 }
if(x === "40" && z === "10") {
   document.getElementById("outputCost").innerHTML = ' $540';
   document.getElementById("price").value = parseFloat("540.00");'
 }
if(x === "50" && z === "10") {
   document.getElementById("outputCost").innerHTML = ' $510';
   document.getElementById("price").value = parseFloat("510.00");
 }
if(x === "60" && z === "10") {
   document.getElementById("outputCost").innerHTML = ' $650';
   document.getElementById("price").value = parseFloat("650.00");
 }
if(x === "20" && z === "11") {
   document.getElementById("outputCost").innerHTML = ' $380';
   document.getElementById("price").value = parseFloat("380.00");
 }
if(x === "30" && z === "11") {
   document.getElementById("outputCost").innerHTML = ' $493';
   document.getElementById("price").value = parseFloat("493.00");
 }
if(x === "40" && z === "11") {
   document.getElementById("outputCost").innerHTML = ' $566';
   document.getElementById("price").value = parseFloat("566.00");
 }
if(x === "50" && z === "11") {
   document.getElementById("outputCost").innerHTML = ' $610';
   document.getElementById("price").value = parseFloat("610.00");
 }
if(x === "60" && z === "11") {
   document.getElementById("outputCost").innerHTML = ' $680';
   document.getElementById("price").value = parseFloat("680.00");
 }
if(x === "20" && z === "12") {
   document.getElementById("outputCost").innerHTML = ' $400';
   document.getElementById("price").value = parseFloat("400.00");
 }
if(x === "30" && z === "12") {
   document.getElementById("outputCost").innerHTML = ' $516';
   document.getElementById("price").value = parseFloat("516.00");
 }
if(x === "40" && z === "12") {
   document.getElementById("outputCost").innerHTML = ' $592';
   document.getElementById("price").value = parseFloat("592.00");
 }
if(x === "50" && z === "12") {
   document.getElementById("outputCost").innerHTML = ' $710';
   document.getElementById("price").value = parseFloat("710.00");
 }
if(x === "60" && z === "12") {
   document.getElementById("outputCost").innerHTML = ' $710';
   document.getElementById("price").value = parseFloat("710.00");
 }
if(x === "20" && z === "13") {
   document.getElementById("outputCost").innerHTML = ' $420';
   document.getElementById("price").value = parseFloat("420.00");
 }
if(x === "30" && z === "13") {
   document.getElementById("outputCost").innerHTML = ' $539';
   document.getElementById("price").value = parseFloat("539.00");
 }
if(x === "40" && z === "13") {
   document.getElementById("outputCost").innerHTML = ' $618';
   document.getElementById("price").value = parseFloat("618.00");
 }
if(x === "50" && z === "13") {
   document.getElementById("outputCost").innerHTML = ' $570';
   document.getElementById("price").value = parseFloat("570.00");
 }
if(x === "60" && z === "13") {
   document.getElementById("outputCost").innerHTML = ' $740';
   document.getElementById("price").value = parseFloat("740.00");
 }
if(x === "20" && z === "14") {
   document.getElementById("outputCost").innerHTML = ' $440';
   document.getElementById("price").value = parseFloat("440.00");
 }
if(x === "30" && z === "14") {
   document.getElementById("outputCost").innerHTML = ' $562';
   document.getElementById("price").value = parseFloat("562.00");
 }
if(x === "40" && z === "14") {
   document.getElementById("outputCost").innerHTML = ' $644';
   document.getElementById("price").value = parseFloat("644.00");
 }
if(x === "50" && z === "14") {
   document.getElementById("outputCost").innerHTML = ' $670';
   document.getElementById("price").value = parseFloat("670.00");
 }
if(x === "60" && z === "14") {
   document.getElementById("outputCost").innerHTML = ' $770';
   document.getElementById("price").value = parseFloat("770.00");
 }
if(x === "20" && z === "15") {
   document.getElementById("outputCost").innerHTML = ' $460';
   document.getElementById("price").value = parseFloat("460.00");
 }
if(x === "30" && z === "15") {
   document.getElementById("outputCost").innerHTML = ' $585';
   document.getElementById("price").value = parseFloat("585.00");
 }
if(x === "40" && z === "15") {
   document.getElementById("outputCost").innerHTML = ' $670';
   document.getElementById("price").value = parseFloat("670.00");
 }
if(x === "50" && z === "15") {
   document.getElementById("outputCost").innerHTML = ' $770';
   document.getElementById("price").value = parseFloat("770.00");
 }
if(x === "60" && z === "15") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "20" && z === "16") {
   document.getElementById("outputCost").innerHTML = ' $480';
   document.getElementById("price").value = parseFloat("480.00");
 }
if(x === "30" && z === "16") {
   document.getElementById("outputCost").innerHTML = ' $608';
   document.getElementById("price").value = parseFloat("608.00");
 }
if(x === "40" && z === "16") {
   document.getElementById("outputCost").innerHTML = ' $696';
   document.getElementById("price").value = parseFloat("696.00");
 }
if(x === "50" && z === "16") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "60" && z === "16") {
   document.getElementById("outputCost").innerHTML = ' $830';
   document.getElementById("price").value = parseFloat("830.00");
 }
if(x === "20" && z === "17") {
   document.getElementById("outputCost").innerHTML = ' $500';
   document.getElementById("price").value = parseFloat("500.00");
 }
if(x === "30" && z === "17") {
   document.getElementById("outputCost").innerHTML = ' $631';
   document.getElementById("price").value = parseFloat("631.00");
 }
if(x === "40" && z === "17") {
   document.getElementById("outputCost").innerHTML = ' $722';
   document.getElementById("price").value = parseFloat("722.00");
 }
if(x === "50" && z === "17") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "60" && z === "17") {
   document.getElementById("outputCost").innerHTML = ' $860';
   document.getElementById("price").value = parseFloat("860.00");
 }
if(x === "20" && z === "18") {
   document.getElementById("outputCost").innerHTML = ' $520';
   document.getElementById("price").value = parseFloat("520.00");
 }
if(x === "30" && z === "18") {
   document.getElementById("outputCost").innerHTML = ' $654';
   document.getElementById("price").value = parseFloat("654.00");
 }
if(x === "40" && z === "18") {
   document.getElementById("outputCost").innerHTML = ' $748';
   document.getElementById("price").value = parseFloat("748.00");
 }
if(x === "50" && z === "18") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "60" && z === "18") {
   document.getElementById("outputCost").innerHTML = ' $890';
   document.getElementById("price").value = parseFloat("890.00");
 }
if(x === "20" && z === "19") {
   document.getElementById("outputCost").innerHTML = ' $540';
   document.getElementById("price").value = parseFloat("540.00");
 }
if(x === "30" && z === "19") {
   document.getElementById("outputCost").innerHTML = ' $677';
   document.getElementById("price").value = parseFloat("677.00");
 }
if(x === "40" && z === "19") {
   document.getElementById("outputCost").innerHTML = ' $774';
   document.getElementById("price").value = parseFloat("774.00");
 }
if(x === "50" && z === "19") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "60" && z === "19") {
   document.getElementById("outputCost").innerHTML = ' $920';
   document.getElementById("price").value = parseFloat("920.00");
 }
if(x === "20" && z === "20") {
   document.getElementById("outputCost").innerHTML = ' $560';
   document.getElementById("price").value = parseFloat("560.00");
 }
if(x === "30" && z === "20") {
   document.getElementById("outputCost").innerHTML = ' $700';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "40" && z === "20") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "50" && z === "20") {
   document.getElementById("outputCost").innerHTML = ' $800';
   document.getElementById("price").value = parseFloat("800.00");
 }
if(x === "60" && z === "20") {
   document.getElementById("outputCost").innerHTML = ' $950';
   document.getElementById("price").value = parseFloat("950.00");
 }
if(d === "yes") {
 var p = document.getElementById("price").value;
 console.log(p);
 var n = parseFloat("50.00");
 console.log(n);
 t = +p + +n;
 console.log(t);
 document.getElementById("outputCost").innerHTML = " $" + t;
 }
});
function getOption() { 
    selectElement = document.querySelector('#selectedFont');                     
    output = selectElement.value; 
    document.querySelector('.output').textContent = output;
getTotal();
}; 
function getSizeOption() { 
    selectElement = document.querySelector('#selectedSize');                  
    outputSize = selectElement.value;   
    document.querySelector('.outputSize').textContent = outputSize;     
    getTotal(); 
};
function getMountOption() { 
    selectElement = document.querySelector('#selectedMount');                      
    outputMount = selectElement.value;  
    document.querySelector('.outputMount').textContent = outputMount;   
    getTotal();
};  
function getPowerWireOption() { 
    selectElement = document.querySelector('#selectedPowerWire');                   
    outputPowerWire = selectElement.value;
    document.querySelector('.outputPowerWire').textContent = outputPowerWire;   
    getTotal();
}; 
function getBackingOption() { 
    selectElement = document.querySelector('#selectedBacking');                
    outputBacking = selectElement.value;  
    document.querySelector('.outputBacking').textContent = outputBacking; 
    getTotal();
};
function getColorOption() { 
    selectElement = document.querySelector('#selectedColor'); 
    outputColor = selectElement.value; 
    document.querySelector('.outputColor').textContent = outputColor; 
getTotal();
}; 
</script>

Sorry it’s long, but here the code I am working with. The weird part about this is that when I add new functions, they seem to work just fine… and then when I go to EDIT those and new some new code to the function, I get this error.

I am not really sure what’s wrong with the code. I am making sure to only load the function(s) giving errors AFTER DOM, and it’s still giving me issues.

Any help is appreciated.

Thanks!

Here’s the full error:

(index):479 Uncaught ReferenceError: grabText is not defined
    at HTMLTextAreaElement.onkeyup ((index):479)