How do I resolve the error: Uncaught ReferenceError: validator is not defined at HTMLInputElement.onclick where the function (validator) IS defined?

Question

I have a function called validator that requires users of our website to read the disclaimer and check a checkbox showing they Accept the disclaimer. Then it will open a GIS map upon clicking the Accept button. My code seemingly works in CodePen (it says the code has no errors, although it does not load the URL upon hitting Accept but I don't know if CodePen is supposed to be able to do that) but in our CMS I'm getting an error: Uncaught ReferenceError: validator is not defined at HTMLInputElement.onclick.

I don't understand this error because the function (validator) is defined. I'm a JavaScript beginner so I'm likely missing something obvious to the rest of you.

I have the code residing in a Custom Content item in our CMS that is referenced from the web page via the class. I contacted Support and they confirmed this is the correct way to reference the code. I use this same method to add custom CSS and it always works so I think this is probably correct.

I then thought that maybe the function is not loading into the page until after it's being called in my HTML, so I pasted the function into the HTML inside script tags via adding it into the page content area widget before my HTML where it's called, but that didn't work. I didn't really think it would but was throwing spaghetti at the wall because I don't know what else to try. I don't have access to the main codebase because we are just a tenant using this CMS for our government agency and the vendor doesn't help with troubleshooting code.

<form name="agreement" style="text-align: center;"> <input type="checkbox" id="agreement" name="agreement"> <br> <br> <input type="button" value="Accept" onclick="validator()">  </form>

function validator() {
if (document.getElementById("agreement").checked) {
location.assign(
"http://galvcountymaps.maps.arcgis.com/apps/webappviewer/index.html?id=d619c89878cd4c399b376b51996a7541"
);
} else {
alert("You must check on the agreement.");
}
}

Here is the URL to the page I'm working on: https://www.galvestoncountytx.gov/county-offices/engineering-floodplain-permitting-right-of-way/engineering/gis-mapping/interactive-county-map-test

Thank you, Holly

Answer 1

Your code seems to be correct but here is another way which you can try:-

function validator() {
  console.log("hii")
  // Your validation logic here
}

  document.getElementById('acceptButton').addEventListener('click', validator);

<input type="button" value="Accept" id="acceptButton" />