<body>
<select onchange="doChange()">
<option>A</option>
<option>B</option>
</select>
<script>
function doChange() {
console.log('hi');
}
</script>
</body>
As you can see from this example, it should work as you described.
That likely means it isn't really an issue with the code, but more an issue with how it is loaded.
The first is to make sure that your function is actually there. How you've described it, you should be able to open up the console in Chrome and just type showHistoryDiff and it should output something like this:
ƒ showHistoryDiff() { console.log('hi'); }
If it doesn't say this, but instead says it is undefined, then for whatever reason your code isn't getting built. If that's the case, you'll want to take a very close look at your build pipeline and/or setup to make sure it's actually going where you think it should.
If it does exist, then there are a couple of possibilities:
- it is getting overridden by something else and becoming undefined. Look for any other references to the function name throughout your code
- there is some other JavaScript syntax error which is happening before your function is declared, so the function doesn't end up declared
One other remote possibility is if you are loading the code from two different domains, you might be running into cross-origin (CORS) issues.
Look at your console and see if there are any errors being spit out. Clearing those up should be your first goal.
