<HTML>
<H1> This is an HTML Header </H1>
<script type="text/javascript">
<!--
alert("This page uses a custom element which incorporates HTML and JavaScript. This pop-up might be useful for instructing/advising users before starting a form?");
document.write("<P>");
var dateToday = new Date();
document.write("<P>" + "Today is " + dateToday);
document.write("<P>" + "A loop displaying an array: ");
var dayArray = new Array(7);
dayArray[0]="Sunday"; dayArray[1]="Monday"; dayArray[2]="Tuesday"; dayArray[3]="Wednesday"; dayArray[4]="Thursday"; dayArray[5]="Friday"; dayArray[6]="Saturday";
for(var count = 0; count < 7; count++)
{
document.write(dayArray[count] + ", ");
}
// -->
</script>
<P>
<TABLE border="2">
<TR><TD colspan=3>Here's an HTML Table</TD></TR>
<TR> <TD> I </TD><TD> Can </TD><TD> Use </TD></TR>
<TR> <TD> A </TD><TD> Table </TD><TD>Here </TD>
</TABLE>
<P>
<P><P>
Note: Currently works in Chrome, but not IE.
<P>
<button id="myButton">Click for more information</button>
<script>
document.getElementById("myButton").addEventListener("click", function(){ alert("More information"); } ) ;
</script>
</HTML>
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener){
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent){
el.attachEvent(eventName, eventHandler);
}
}
// ...
bindEvent("window", 'keypress', function (evt) {
document.getElementById('myElement').style.outline="2px dotted";
alert('element clicked---' + evt.keyCode + document.getElementById('myElement').value);
});
bindEvent(document.getElementById('myElement'), 'keydown', function (evt) {
document.getElementById('myElement').style.outline="1px dotted";
alert('element keydown---' + evt.keyCode);
});
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |