I was setting up a basic website, but for some reason when I went to test it I was confused to find that it wasn't quite working like usual. I keep getting this error. "Uncaught ReferenceError: revealMessage is not defined"
<!DOCTYPE html>
<html>
<head>
<script src="js/script.js"></script>
<title>Rock Paper Scissors!</title>
</head>
<body>
<button onclick="revealMessage()">Click!</button>
<p id="hiddenMessage" style="display:none">hidden message thingy</p>
</body>
</html>function revealMessage() {
document.getElementById("hiddenMessage").style.display = "block";
}The only thing I can see that could be a possible issue is if your JavaScript file is not within a folder named "js". You said that your js is in another folder; if it is named anything other than "js", then your html file is trying to access the JS file within a folder that does not exist. So your file structure should look like
- [html file name].html
- js/
- script.js
Your two snippets were disconnected. Just put HTML and JS code into same snippet and it should work. See below:
function revealMessage() {
document.getElementById("hiddenMessage").style.display = "block";
}<!DOCTYPE html>
<html>
<head>
<script src="js/script.js"></script>
<title>Rock Paper Scissors!</title>
</head>
<body>
<button onclick="revealMessage()">Click!</button>
<p id="hiddenMessage" style="display:none">hidden message thingy</p>
</body>
</html>Looks like there is no problem with the code but just check if your function is in global scope or local scope.
Also make sure that your js file is linked to your html properly. Check your js file with a basic alert();