Uncaught ReferenceError: revealMessage is not defined - javascript

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();

Related

javascript jQuery code file not working when linked from HTML

hi I am new to Javascript and I am trying to use jQuery but it doesn't work if I'm using it on another js file, but if directly inputted into my HTML file it works.
Here is the try.js file:
$("#btn1").click(fn1);
function fn1(){
$("#heading1").fadeToggle();
}
and the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript trial ANIMATIONS </title>
<script src="jquery.js"></script>
<script src="try.js" type='text/javascript'></script>
</head>
<body>
<h2 id="heading1">SETTING UP JQUERY</h2>
<button id="btn1">click me</button>
</body>
<HTML>
Also how can I see the library of jQuery while typing in another js file. I'm using vs code
May be you can use manipulation with dom when document will been load.
function fn1(){
$("#heading1").fadeToggle();
}
$(function() {
$("#btn1").click(fn1);
});
Check out responses to this question. You might get an idea on how to proceed.

Implement JS in HTML

It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.
you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.
A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>

Unable to create Rx.Observable from JS event

I'm trying to figure out how to use rx.js with a dog-simple example, but can't figure out what reference or file I'm missing that means it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>
That's literally it. The script line correctly loads a local copy of rx.js 2.4.1 freshly downloaded from nuget.
I'm getting the error Rx.Observable.fromEvent is not a function, so I'm assuming that there is a missing reference.
It might just be the time of night, but I'm struggling to see what I'm doing wrong. Any help?
Resolved by downloading and using additional Rx files rx.async.js and rx.binding.js like so:
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
<script src="/Scripts/rx.async.js"></script>
<script src="/Scripts/rx.binding.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>

sample HTML to test javascript codes

I have just started learning Javascript and Ok here is a code I want to try and see it in the browser, so I create a test.js file and put this in it:
function useless(callback) {
return callback
}
var text = 'Amigo';
assert(
useless(function(){ return text; }) === text,
"The useless function works! " + text);
But still there is more, I should write a minimum HTML page than can call this function, What is sample HTML to host this method in it?
I have written something like this but still there is something wrong with it:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="hehe.js" >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="hehe.js"></script>
<script >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
You can load the source in a separate script from the inline one that you call it in. Note that this assumes that hehe.js is in the root directory of your site.
For testing js in general jsFiddle is a nice resource that lets you define your html/js/css and experiment with small changes without having to write out all the files.

Global variables in Javascript across multiple files

A bunch of my JavaScript code is in an external file called helpers.js. Inside the HTML that calls this JavaScript code I find myself in need of knowing if a certain function from helpers.js has been called.
I have attempted to create a global variable by defining:
var myFunctionTag = true;
In global scope both in my HTML code and in helpers.js.
Heres what my html code looks like:
<html>
...
<script type='text/javascript' src='js/helpers.js'></script>
...
<script>
var myFunctionTag = false;
...
//I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>
Is what I am trying to do even feasible?
You need to declare the variable before you include the helpers.js file. Simply create a script tag above the include for helpers.js and define it there.
<script type='text/javascript' >
var myFunctionTag = false;
</script>
<script type='text/javascript' src='js/helpers.js'></script>
...
<script type='text/javascript' >
// rest of your code, which may depend on helpers.js
</script>
The variable can be declared in the .js file and simply referenced in the HTML file.
My version of helpers.js:
var myFunctionWasCalled = false;
function doFoo()
{
if (!myFunctionWasCalled) {
alert("doFoo called for the very first time!");
myFunctionWasCalled = true;
}
else {
alert("doFoo called again");
}
}
And a page to test it:
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>
<body>
<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>
<script type="text/javascript">doFoo();</script>
<p>Some stuff in between</p>
<script type="text/javascript">doFoo();</script>
<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>
</body>
</html>
You'll see the test alert() will display two different things, and the value written to the page will be different the second time.
OK, guys, here's my little test too. I had a similar problem, so I decided to test out 3 situations:
One HTML file, one external JS file... does it work at all - can functions communicate via a global var?
Two HTML files, one external JS file, one browser, two tabs: will they interfere via the global var?
One HTML file, open by 2 browsers, will it work and will they interfere?
All the results were as expected.
It works. Functions f1() and f2() communicate via global var (var is in the external JS file, not in HTML file).
They do not interfere. Apparently distinct copies of JS file have been made for each browser tab, each HTML page.
All works independently, as expected.
Instead of browsing tutorials, I found it easier to try it out, so I did. My conclusion: whenever you include an external JS file in your HTML page, the contents of the external JS gets "copy/pasted" into your HTML page before the page is rendered. Or into your PHP page if you will. Please correct me if I'm wrong here. Thanx.
My example files follow:
EXTERNAL JS:
var global = 0;
function f1()
{
alert('fired: f1');
global = 1;
alert('global changed to 1');
}
function f2()
{
alert('fired f2');
alert('value of global: '+global);
}
HTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
HTML 2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
Hi to pass values from one js file to another js file we can use Local storage concept
<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
Two.js file
function myFunction() {
var test =localStorage.name;
alert(test);
}
Three.js File
localStorage.name = 1;
//Javascript file 1
localStorage.setItem('Data',10);
//Javascript file 2
var number=localStorage.getItem('Data');
Don't forget to link your JS files in html :)
If you're using node:
Create file to declare value, say it's called values.js:
export let someValues = {
value1: 0
}
Then just import it as needed at the top of each file it's used in (e.g., file.js):
import { someValues } from './values'
console.log(someValues);
I think you should be using "local storage" rather than global variables.
If you are concerned that "local storage" may not be supported in very old browsers, consider using an existing plug-in which checks the availability of "local storage" and uses other methods if it isn't available.
I used http://www.jstorage.info/ and I'm happy with it so far.
You can make a json object like:
globalVariable={example_attribute:"SomeValue"};
in fileA.js
And access it from fileB.js like:
globalVariable.example_attribute
You can set
window['yourVariableName'] = yourVariable;
and it will make that variable global for all the files.

Categories