I have a .js file which has a class defined. I want to call this class from <script> from another html file.
component.js:
class TryClass {
constructor(name) {
this.name = name;
}
sayHi() {
alert( this.name );
}
}
main.html:
<html>
<script src="./component.js" />
<script>
var user = new TryClass( "John" );
user.sayHi();
</script>
<body>
</body>
This doesn't show the alert when I load main.html (from my webserver).
However, with the inspect console, I am able to use the TryClass.
How to resolve this?
after test i think the problem is your format
<!DOCTYPE html>
<html lang="en">
<head>
<script src="component.js"></script>
<script>
var user = new TryClass("John");
user.sayHi();
</script>
</head>
<body>
</body>
</html>
you lost</script> after <script src="./component.js" />,i guess this is the worst error though you also lost </html> and <head></head>
Please try by
var TryClass = function(name){
this.name = name;
}
TryClass.prototype.sayHi = function () {
alert( this.name );
}
Related
I defined Class in my javascript file...I imported that file into html page:
<script type="module" src="./js/controller.js"></script>
How can I now acces to classes inside of that js file?
I want to have something like this (in my html file):
<script>
let app = null;
document.addEventListener('DOMContentLoaded', function () {
//Init app on DOM load
app = new MyApp();
});
</script>
But it doesn't work (I get Uncaught ReferenceError: MyApp is not defined)...If I include this DOMContentLoaded listener into end of my controller.js file, It works. But I lost reference to app variable this way (which I don't want)... Is there way to have reference to something defined in modules?
Most important reason why I want to have that reference is ability to access to my app object from google chrome console...
Thanks!
You can access your class in js file from html in the following way-
My Home.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script type="module">
import { Car } from "./main.js";
let obj= null;
alert("Working! ");
obj = new Car("Mini", 2001);
obj.PrintDetails();
document.addEventListener('DOMContentLoaded', function () {
let obj2 = new Car("Merc", 2010);
obj2.PrintDetails();
});
</script>
</head>
<body>
<h1> Lets try something <br></h1>
</body>
</html>
My main.js file:
export class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
PrintDetails() {
console.log(" Name = "+ this.name);
console.log(" year = "+ this.year);
}
}
I am trying to call the immediate function defined in test1.js on click of the button defined under html file. It always throws error "test is undefined". I am little bit aware that being a immediate function, it calls immediately, and so it returns the "undefined error". But is there any way I can call the immediate function (access methods, properties, etc.) on click of the button?
Thank you in advance.
//test1.js
var test = (function(){
alert(window);
var tmp = 'hello';
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
You have to modify your code so that the IIFE returns an object with a tmp property. Such as
var test = (function(){
alert(window);
var tmp = 'hello';
return {tmp:tmp};
}());
You need to explicitly return an object containing any data you want made available after you run the IIFE. (Just add the return as I did to the snippet below).
//test1.js
var test = (function(){
alert(window);
// you need to return any values you want accessible
return {
tmp: "hello"
}
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>
I created a custom element called "memory-box" like the below code.
Please pay attention to the function "logthis" which is in "memory-box-template".
memory-box.html
<template id="memory-box-template">
<input id="memory-box" type="form" />
<input type="button" id="testbutton" />
<script type="text/javascript">
function logthis(me){
console.log(me);
}
</script>
</template>
<script type="text/javascript">
(function() {
var thisDoc = document.currentScript.ownerDocument;
var storage = localStorage;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var temp = thisDoc.querySelector('#memory-box-template');
var con = document.importNode(temp.content, true);
this.createShadowRoot().appendChild(con);
var input = this.querySelector('::shadow #memory-box');
var data = storage.getItem(this.id);
input.value = data;
input.addEventListener('input', saveData.bind(input, this.id));
}
},
});
document.registerElement('memory-box', {
prototype: proto
});
function saveData(id, e) {
storage.setItem(id, this.value);
}
})();
</script>
Now, I uses the custom element "memory-box" like the below code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="import" href="/html/memory-box.html">
</head>
<body>
<div><memory-box id="memory1"></memory-box></div>
<div><memory-box id="memory2"></memory-box></div>
<div><memory-box id="memory3"></memory-box></div>
<div><memory-box id="memory4"></memory-box></div>
</body>
<script type="text/javascript">
logthis(this);
</script>
</html>
As you can see, I putted a script in the index.html and called the function "logthis" just because I was curious. And no error occurred.
Why?
The function "logthis" is in each shadow doms. It's supposed not able to be called outside the shadow dom, I think.
As explained here, while the HTML within Shadow DOM is encapsulated, any JavaScript is NOT -- it is in the global scope, unless you utilize specific javascript techniques (namescaping, IIFE) to do so.
Hope this helps,
Jonathan Dodd
i tried to pop an alert when clicked on a div , didn't really succeed , i messed it a little to practice with objects.
here is the the code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
var start = {
modeBox : function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
the problem : not alerting
why i don't get alert when i click on the div?
live example : http://jsfiddle.net/YqP93/
The following code tested in Firefox and Chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox : function(){
alert('Test');
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
NOTE: the code you posted in jsfiddle is not working, but you can copy and paste the code above that works in browsers mentioned.
this.mine = {
start: {
modeBox : function(){
alert();
}
}
you are trying to declare a var in an object literal. I don't think this is valid js for one but more importantly you can not get at vars declared in that scope. You have to assign the property to the object. You had it right with the modeBox.
Get rid of the var deceleration (why?):
mine = {
start: {
modeBox: function() {
alert();
}
}
};
Demo: http://jsfiddle.net/YqP93/3/
try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox: function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>