app.js
"use strict";
var tb = {
rahmen: {
eigenschaften: [
"hochwertig",
"verwindungssteif",
"vergleichsweise verwindungssteif",
"sehr verwindungssteif",
"sehr hohe Verwindungssteifigkeit",
"hohe Steifigkeit"
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
((Some Head-Tags))
<script src="dist/app.js" defer></script>
((Some Head-Tags))
</head>
<body>
<div class="container">
<section>
<h1>Test</h1>
<script>
console.log(tb.rahmen.eigenschaften[3]);
</script>
</section>
</div>
</body>
</html>
Error Message
Uncaught ReferenceError: tb is not defined
The problem
It must be something simple, but after reading many posts I still have no clue.
Why is my Javascript-Object still undefined.
Sorry, for the dump question.
Thanks,
Musa
The reason for the error is that you have defer on your script tag for app.js, so that code isn't run until after all the HTML has been parsed. But your inline script trying to use tb isn't deferred, so it will run as soon as it's encountered, which is during the HTML parsing and thus before app.js is run.
The spec has a great graphic showing what defer and such do:
I'd suggest keeping all of the logic in app.js and removing the second script. If you need to add content there with your script, do it via the DOM after the HTML has been parsed.
For instance, if you wanted to add content there:
app.js:
"use strict";
var tb = {
rahmen: {
eigenschaften: [
"hochwertig",
"verwindungssteif",
"vergleichsweise verwindungssteif",
"sehr verwindungssteif",
"sehr hohe Verwindungssteifigkeit",
"hohe Steifigkeit"
]
}
};
document.getElementById("main-section-content").textContent = tb.rahmen.eigenschaften[3];
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
((Some Head-Tags))
<script src="dist/app.js" defer></script>
((Some Head-Tags))
</head>
<body>
<div class="container">
<section>
<h1>Test</h1>
<div id="main-section-content"></div>
</section>
</div>
</body>
</html>
Notice that now there's just one script, which does its work when loaded.
Remove defer. That should help and fix the issue.
Related
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();
I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#content').load("import.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
and here is the page that I'm trying to import:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="test-div">
<p>This is some text.</p>
</div>
</body>
</html>
can somebody please point out what I might be doing wrong here?
The DOM is likely not fully loaded when the .load function is being run. Change to this.
<script>
$(document).ready(function() {
$('#content').load("import.html");
});
</script>
Note - as in the comment, this only works on a server.
It should ideally work. There must be some other issue
Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?
This is my HTML file.
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
</body>
<script src = "MessagingPage.js"></script>
This is my JS file
document.getElementById("TestID").addEventListener("load", function(){
this.innerHTML("Hi");
})
document.write("Hello World");
Now, when I load the HTML, I get "Test" in the browser. However, what needs to be there is "Hi". I do not understand why this happens. Can you please help me understand? I am just getting started, so please explain in simple terms.
Thanks for taking the time to read through this :)
You have two problems.
Only elements which load external content have a load event (such as an iframe or img).
The h3 isn't loading any external content so has no load event.
Perhaps you should bind your event handler to the window.
innerHTML is a string, not a function.
addEventListener("load", function() {
document.getElementById("TestID").innerHTML = "Hi";
})
document.write("Hello World");
<header>
<h3 id="TestID"> Test </h3>
</header>
<script src="MessagingPage.js"></script>
Including the script inside <body> and updating the JS file will resolve the problem.
Here is the example of working code:
Updated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
<script src = "/MessagingPage.js"></script>
</body>
</html>
Updated JS:
// MessagingPage.js
document.getElementById("TestID").innerHTML = "Hi"
document.write("Hello World");
Output:
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>
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.