This is my html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
<title>quickstart</title>
<link rel="stylesheet" href="styles.css">
<script defer src="allEvents.js"></script>
<script defer src="main.dart.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
allEvents.js file:
function myFunction() {
console.log("from event");
var event = new CustomEvent("test", { "detail": "Example of an event" });
window.document.dispatchEvent(event);
}
Dart main method:
import 'dart:html' as html;
void main() {
print("from main");
html.window.onMessage.listen((html.MessageEvent event) {
print("hello dart");
});
}
I am not able to get test event in my dart hence no console log, what is wrong with my code
I figured out the solution:
import 'dart:html' as html;
void main() {
print("from main");
html.CustomEvent someEvent;
html.window.document.addEventListener(
'test',
(event) =>
{someEvent = event as html.CustomEvent, print(someEvent.detail)});
}
Related
I'm trying to use two script hosts in case one doesn't show but my catch statement doesn't seem to be catching status 404 errors when I purposefully mess up the url. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()" ></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error(){
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
try{
var t=document.createElement("script")
t.setAttribute("src","https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js")
document.body.appendChild(t);
}
catch(e){
alert(e)
}
</script>
</html>
This type of error cannot be catched with try...catch. Instead, listen on the error event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()"></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error() {
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
var t = document.createElement("script");
// Alerts "Error loading script" if there was an error
t.onerror = err => alert("Error loading script");
t.setAttribute("src", "https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js");
document.body.appendChild(t);
</script>
</html>
So I made a small version of my problem. Here I am adding text into an input element. But when it is added it doesnt trigger the event listener.
function testFunction() {
document.getElementById("testInput").addEventListener("change", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
}
testFunction();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>
You need to create the event manually and use dispatchEvent() method to fire the event to the target element.
function testFunction() {
document.getElementById("testInput").addEventListener("input", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
let event = new Event("input");
document.getElementById("testInput").dispatchEvent(event);
}
testFunction();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>
I'm trying to change the background color of a div element on button press but I'm getting the error Cannot set property 'BackgroundColor' of undefined. The event handler for the button is inside the window.onload event. I thought at that point every element inside the html document would be loaded, but apparently not.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random").style.BackgroundColor= "black";
});
}
</script>
</body>
</html>
try the following code segment.
the issue is document.getElementsByClassName("random") returning an array of elements.So you should select one element from that array and get the style of that element.
And BackgroundColor should be backgroundColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random")[0].style.backgroundColor= "black";
});
}
</script>
</body>
</html>
You can this out - getElementsByClassName produces error "undefined"
Another alternative could be this.
<body>
<div id="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementById("random").style.backgroundColor= "black";
});
}
</script>
Modify the script as follows and try again:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.querySelector(".random").style.backgroundColor= "black";
});
}
</script>
</body>
</html>
Look into comments by #Bravo, document.getElementsByClassName("random") returns a HTMLCollection, not a single element - therefore document.getElementsByClassName("random").style is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function () {
document
.getElementById('button')
.addEventListener('click', function () {
const button = document.getElementsByClassName('random');
for (let index = 0; index < button.length; index++) {
const element = button[index];
element.style.backgroundColor = 'black';
}
// if you will have only one element with class=random or if you only want to apply style to the first element with class=random, then
// button[0].style.backgroundColor = 'black';
// in your case, you should add an id to the element and use id as the selector
});
};
</script>
</body>
</html>
I'm working on a webgl project now and I'm trying to call javascript function in index.html from plugin.jslib
I did google some methods and seems they're not working.
Is there a proper and simple way to do this?
below codes are the ones that i tried.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script type="text/javascript">
window.CheckLoad = function(){ window.alert('It is working!!'); };
</script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
mergeInto(LibraryManager.library {
Loaded: function()
{
window.CheckLoad();
},
});
Unity C# script
public class blablabla : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void Loaded();
public static void IsLoaded()
{
#if !UNITY_EDITOR && UNITY_WEBGL
Loaded();
#endif
}
void Start()
{
IsLoaded();
}
}
Well.. I was stupid.
turned out it was my mistake and the way to do these stuffs are quite easy.
For those who might have same question, check below codes.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
function CheckLoad(){
window.alert("WORKING~!");
}
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
var plugin = {
Loaded: function()
{
CheckLoad();
}
};
mergeInto(LibraryManager.library, plugin);
I need to add a simple event listener. It just doesn't work even while testing with console.log. Here are my files:
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CHAT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<input id='input' cols="30" rows="10"></input>
<button id='send'>Send</button>
</form>
<div id='output' style='background-color: aqua;'> 1 </div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.2/socket.io.js'></script>
<script src="./scripts/sockets.js"></script>
</script>
</html>
sockets.js
var socket = io.connect('http://localhost:3000/chat');
var input = document.getElementById('input');
var send = document.getElementById('send');
var output = document.getElementById('output');
console.log('send');
send.addEventListener('click', () => {
console.log('event listener added');
/*socket.emit('sending', {
input: input.value
});
input.value = '';*/
});
Also I want to admit that path is correct. "Send" was posted in console, but 'event listener added' - was not.