This is really bugging me, can't seem to get this to work and I figure it's got to be some small little thing I'm overlooking. I am getting this error: Uncaught TypeError: undefined is not a functiontest-index.html:16 (anonymous function)
Here's code to reproduce, first the element:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="test-element" >
<template>
<div>YOOOOO</div>
</template>
<script>
Polymer({
loaderup: function(event, detail, sender) {
alert("WAT?")
}
});
</script>
</polymer-element>
And here's the page that's trying to load it:
<!doctype html>
<html>
<head>
<title>MyApp</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="test-element.html">
</head>
<body unresolved>
<test-element id="test-el"></test-element>
<script>
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
</script>
</body>
</html>
But it gives the error I posted about on x.loaderup(). Any ideas?
You need to wait for the polymer-ready event, because the Polymer element upgrade is performed asynchronously:
<script>
window.addEventListener('polymer-ready', function() {
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
});
</script>
Related
I'm getting an Uncaught ReferenceError when I try to load this script, any suggestions?
index.html:12 Uncaught ReferenceError: mobilenet is not defined
at index.html:12
<html>
<head>
<title>Something else Introduction</title>
<!---- Import Script---->
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript" </script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"</script>
</head>
<body>
<img id="img" crossOrigin src = "https://i.imgur.com/e5KD2lt.jpg">
<h1 id="message">Hello, I'm a simple web page!</h1>
<script>
mobilenet.load().then(net => {
console.log('Model loaded to memory!')
const theImage = document.getElementById('img')
net.classify(theImage).then(result=> {
document.getElementById('message').innerText = `
Detected: ${result[0].className}
Probability: ${result[0].Probability}
`
})
})
</script>
</body>
</html>
The script tags are missing closing brackets
Just change in your <head> tags as the following:
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"></script>
Additional suggestion:
Use your <script> tags at the end of <body> tag and not in the <head> or just simply use async attribute. It will help the page load performance. Read further in this answer for longer explanation.
I hope this helps!
I'm trying to print output to console when a document is loaded. Below is the code I have written. But there's no output displayed.
var div = document.querySelector('#red');
document.addEventListener('DOMContentLoaded',function (){
console.log('event triggered...');
});
Output is displayed correctly when I use below code. Can you please explain me the reason for this behavior?
var div = document.querySelector('#red');
window.addEventListener('load',function (){
console.log('event triggered...');
});
My simple HTML:
<html>
<head>
<title>enlitle</title>
<link href='styleSheet.css' type='text/css' rel='stylesheet' id='linkElement' />
<script async type='text/javascript' src='scripts.js'></script>
</head>
<body>
<div id='blue'>
<div id='red'>
</div>
</div>
</body>
</html>
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
I'm trying to add some paper elements to a popup of a chrome extension. So far so good as to rendering them in the popup but I'm having trouble having my buttons work. Since Chrome extensions have to have separate files for the JavaScript here is the code I'm working with:
popup.html
<html>
<head>
<title>Popup</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="stylesheet" href="css/popup.css">
</head>
<body unresolved style="width: 750px">
<section>
<template id="buttonGroup" is="auto-binding">
<paper-button raised="" id="signin" role="button" tabindex="1" on-click="{{signIn}}">Sign in</paper-button>
<paper-button raised="" id="signout" role="button" tabindex="2" on-click="{{signOut}}" class="red" >Sign out</paper-button>
</template>
</section>
<script src="js/popup.js"></script>
</body>
</html>
popup.js
Polymer({
var buttonIn = document.querySelector('signin');
buttonIn.addEventListener('signin', function() {
chrome.runtime.sendMessage({message: "do_signin"}, function(response) {});
});
var buttonOut = document.querySelector('signout');
buttonOut.addEventListener('signout', function() {
chrome.runtime.sendMessage({message: "do_signout"}, function(response) {});
});
});
The problem is Chrome is returning with the following Uncaught SyntaxError: Unexpected identifier on the line var buttonIn = document.querySelector('signin');
Is this because of some problem between polymer and the chrome extension or because I'm doing something wrong?
P.S. When the button gets clicked, all I need it to do is send a message to the background.js file that will handle the signin/signout.
Although I'm not very familiar with Polymer, it is clear that Polymer is expecting you to pass something other than a function, where you seem to be trying to pass in a function without properly declaring the function. Really, I think you should have all your scripts outside of Polymer like such:
Polymer();
var buttonIn = document.getElementById('signin');
buttonIn.addEventListener('signin', function() {
chrome.runtime.sendMessage({message: "do_signin"}, function(response) {});
});
var buttonOut = document.getElementById('signout');
buttonOut.addEventListener('signout', function() {
chrome.runtime.sendMessage({message: "do_signout"}, function(response) {});
});
Also note that I changed querySelector('signin') to getElementById('signin') as you are looking for an element with an id. To use querySelector with an "id", prepend a "#" to "signin": querySelector('#signin').
Check out the documentation as to how to initiate Polymer.
Starting a new site and can't get any jquery to fire. I've tried just executing some in the console in browser to test, moved from external jquery to inside the <head> and can't get anything. It isn't even seeing that first function as existing. I've a feeling it's something so stupidly simple I'm overlooking, but I'm just exhausted from looking over the same <100 lines. One of the errors I try when manually getting the width is this.
Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector."
Suggestions?
<!DOCTYPE HTML>
<html>
<head>
<script href="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script href="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<title>Daniel Jenkins</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>
<script>
function set_container_sizes(){
console.log("Setting div sizes");
var window_width = $(window).width();
console.log("Window is "+window_width+"px wide");
var window_height = $(window).height();
console.log("Window is "+window_height+"px tall");
$('#outer_container').css('max-height',window_height+'px');
$('#outer_container').css('max-width',window_width+'px');
}
$( document ).ready(function(){
console.log("Document now ready");
set_container_sizes();
});
$( window ).resize(function(){
console.log("Window resized");
set_container_sizes();
});
</script>
</head>
<body>
<div id="outer_container">
<div id="inner_top">
<div id="top_head">
Daniel L. Jenkins
</div>
</div>Hello there <div id="inner_bottom">
</div>
</div>
</body>
</html>
The issue is that you are using "href" inside the script tag instead of "src".
I think it should be <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>