We Keep Coding

Where to write Polymer's handler function

I just started on Polymer and there are things I hope can get clarification on. For example, in this documentation: https://elements.polymer-project.org/elements/paper-header-panel. In the last card about Events, there is a script that when content-scroll is triggered. However, I have no idea where to put that script and why double curly brace {{}} is used. If there is a documentation on this it would be great! Thanks.
These are the places that I have tried to put that script:
<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. -->
<script>
(function() {
Polymer ({
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
});
})();
</script>
<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. -->
<script>
Polymer ({
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
});
</script>
<!-- Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-header-panel'. A type with that name is already registered. -->
<script>
Polymer ({
is: "paper-header-panel",
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
});
</script>
<!-- Uncaught SyntaxError: Unexpected token ( -->
<script>
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
</script>
<!-- console doesn't log anything -->
<script>
Polymer ({
is: "custom-element",
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
});
</script>

You will also need to add is and properties properties to your Polymer() function as well as an id to your <dom-module> that matches the value of your Polymer() is property. Something like the following.
Code:
<dom-module id="my-example-element">
<style>
...
</style>
<template>
...
</template>
</dom-module>
<script>
(function() {
Polymer ({
is: 'my-example-element',
properties: {
// See and follow examples
},
navigationbarScrollHandler: function(event) {
var scroller = event.detail.target;
console.log(scroller.scrollTop);
}
});
})();
</script>
Answers:
Double curly braces {{}} is Polymer's data-binding syntax.
The scrollHandler you ask about goes inside your Polymer() function in your <script> section at the very bottom of your custom element but outside your <dom-module>. Here is an example (real world) of the structure your code should follow. (Or see above code for a made-up theoretical example.)
Suggestions:
The best tutorial you can get on all of this is to download the Polymer Seed Element. Then look it over and read all the comments (which serves as de facto documentation). It will get you up and running quickly and provide the context you need. It has all the sample code and explanatory documentation you need to make sense of the question you asked.
You should also download the Polymer Starter Kit. If you haven't done so already. Again, follow the code and it will answer most of the questions you have asked here plus others you don't even know to ask yet.

Error in Custom Google Tag Manager JavaScript

Trying to setup a custom JavaScript in GTM where the innerHTML value is checked for X and if it is X fires.
Here's what I have so far but it's not firing correctly
function() {
var el = document.getElementById('ltrNumPlaceholder');
if (el == null) return 0;
return parseInt(el.innerHTML);
}
I also tried this but GTM complains there there is a syntax error on a line that doesn't exist. (GTM error message for the below is: "Error at line 5, character 2: Parse error. ')' expected.")
function(){
var stepNum = document.getElementById('ltrNumPlaceholder').innerHTML;
if(stepNum == 2)return parseInt(stepNum);
};
Thanks for your help in advance.

To fix the error message, just remove your semicolon at the end of the function (after the closing curly bracket), and that should work.

Uncaught TypeError: Cannot read property 'innerHTML' of null

Keep getting this error, no idea why
Uncaught TypeError: Cannot read property 'innerHTML' of null
My code is:
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
function calculateCircumference (diameter) {
return diameter * 3.14;
}
write (calculateCircumference(4));

Admittedly, the error message is not exactly transparent as to its meaning (but at least you get an error - jQuery would just silently do nothing!)
What it means is that the result of document.getElementById('message') is null. Looking at the docs you will find that this happens when the element cannot be found.
The main reason for an element not being found is because it doesn't exist yet.
<script>// do something with document.getElementById('message');</script>
<div id="message"></div>
The above will FAIL because message does not exist yet. Moving the script after the div will make it work.
Side-note: 3.14 is far too inaccurate. Use Math.PI instead, it's as accurate as a number in JavaScript can be.

Seems that your code is executed before the DOM is ready
window.onload = function(){
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
function calculateCircumference (diameter) {
return diameter * 3.14;
}
write (calculateCircumference(4));
}

If you have your id is set and you still get the same error, make sure you have done the opening and closing tags of your html correctly.

This error is usually caused when the element is not loaded and the js function is trying to access it.
try adding the <script> tag at the very end of the document before </body>
or check if the name of the element is mistyped.

Function is not defined though js file reference is in header

I am working on a page on a website (see http://www.quick-conversions.com/currency).
I am attaching a onkeyup="doConversion('...') on each input field. The corresponding function is defined in a javascript file available at: http://www.quick-conversions.com/sites/MyScripts/PHP/currency.js
In the source page, this file seems to be imported properly in the header:
<script type="text/javascript"
src="http://www.quick-conversions.com/sites/MyScripts/PHP/currency.js?m4xpzi"></script>
But the function is not fired and Firebug says that it is not defined? I am running out of ideas to solve this issue. Anyone has an idea of what is happening? Thanks.

Loading the page I get:
Uncaught SyntaxError: Unexpected token (
currency.js line 104
That is likely the cause.
You have:
var updateConversion(src_rate, value) {
Which should be either:
function updateConversion(src_rate, value) {
or
var updateConversion = function (src_rate, value) {

There's error on your source files.
missing ; before statement
[Break On This Error]
var updateConversion(src_rate, value) {
curren...?m4xpzi (line 104, col 20)

cannot get simple appendChild function working

I am testing javascript code on W3schools' site and I cannot get the appendChild function working.
Hope its not a dumb error.
here it is:
<script type="text/javascript">
function append()
{
var node = document.getElementById(“history”);
node.appendChild(document.createTextNode("text"));
}
window.onload = append;
</script>
<div id="history"></div>

You don't have proper double quotes (I don't know what the others are called):
document.getElementById(“history”);
// ^ ^
This throws the error:
Uncaught SyntaxError: Unexpected token ILLEGAL
It works with:
document.getElementById("history");
DEMO
OT: w3schools is not a good resource for learning (http://w3fools.com/). Better have a look at the Mozilla documentation: https://developer.mozilla.org/en/javascript