I have trouble loading Javascript in normal Polymer Elements:
Here is the test code that works perfectly fine, when executed without polymer:
<body>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
<script>
function popup2() {
alert("What's up brow?");
console.log("deine mudda");
};
var button = document.getElementById("button");
button.addEventListener("click", popup2, false);
</script>
</script>
</body>
But I want to use Javascript inside Polymer Elements and have tried the following insertions:
Nr. 1: Javascript inside the script tag, after the template tag:
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
popup: function() {
alert('What the... dude?');
},
var button = document.getElementById("button");
button.addEventListener("click", popup, false);
});
</script>
</polymer-element>
And this doesn't work. I get the error message in firefox: "SyntaxError: missing : after property id. Chrome instead says: "SyntaxError: Unexpected Identifier".
Both poin to the line "var button = document.getelementById("button");
According to the Polymer Documentation, javascript should just be placed at the end of the file: https://www.polymer-project.org/docs/start/tutorial/step-1.html
So in a second attempt, I place my Javascript directly inside the template tags like this:
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
<script>
function popup() {
alert("jajaja");
};
var button = document.getElementById("button");
button.addEventListener("click", popup, false);
</script>
</template>
<script>
Polymer('my-element', {
});
</script>
</polymer-element>
But this time I get: "Uncaught TypeError: Cannot read property 'addEventListener' of null", which points agian to the line where I write: "button.addEventListener("click", popup, false);".
I guess this means, that the compiler can't see the button id, because it is in the Shadow-Dom?
Please instruct me.
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button on-tap="{{popup}}">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
popup: function() {
alert('alert');
}
});
</script>
</polymer-element>
inside a polymer element you can bind directly to a function by using on-tap="{{function}}" attribute.
edited: all code didn't get into block
keeping eventlisteners in the js method
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
ready: function () {
var button = this.$.button;
button.addEventListener("click", function () {
alert('alert');
});
}
});
</script>
</polymer-element>
edited again: OP wanted to keep html separate from JS
edited 1 more time: i think using a anonymous function is the easiest way to go here if not using the declarative method. code edited