Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>My page title</title>
    <link href='http://fonts.googleapis.com/css?family=Raleway|Crushed' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <h1>Transformers</h1>
    
    <div class="intro">
      
      <p>This is my page about transformers. They are a <em>really cool</em> toy from the 1980's, which have remained popular ever since.</p>
      
      <h2>The types of transformer</h2>
      <p>There are two types of transformer — the <strong>Autobots</strong> are good, and the <strong>Decepticons</strong> are evil. My favourite transformers are:</p>
      
      <ul>
        <li>Soundwave (Decepticon)</li>
        <li>Grimlock (Autobot)</li>
        <li>Starscream (Decepticon)</li>
        <li>Hotrod (Autobot)</li>
        <li>Devastator (Decepticon)</li>
      </ul>
      
        <p>Find out more at the <a href="http://www.hasbro.com/transformers/en_US/">Transformers official site</a>.</p>
    <button>Change user</button>
    
    </div>
    <div class="gallery">
      <img src="http://images1.wikia.nocookie.net/__cb20100504224027/transformers/images/7/78/G1_soundwave.png" alt="The decepticon Soundwave" width="300" class="imgSwap">
      
      <iframe width="420" height="315" src="//www.youtube.com/embed/RJ90S04cST4" frameborder="0" allowfullscreen></iframe>
    </div>
    
  </body>
</html>
 
var myImage = document.querySelector('.imgSwap');
​
myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'http://images1.wikia.nocookie.net/__cb20100504224027/transformers/images/7/78/G1_soundwave.png') {
      myImage.setAttribute ('src','http://unrealbooks.com/catalog/images/Galvatron_flat.jpg');
    } else {
      myImage.setAttribute ('src','http://images1.wikia.nocookie.net/__cb20100504224027/transformers/images/7/78/G1_soundwave.png');
    }
};
​
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
​
function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.innerHTML = 'Hello, ' + myName + '!';
}
​
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Hello, ' + storedName + '!';
}
​
myButton.onclick = function() {
  setUserName();
};
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers