Skip to content

Instantly share code, notes, and snippets.

@kumarldh

kumarldh/hydra-head-vanilla-js.html

Created March 23, 2014 15:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kumarldh/9724624 to your computer and use it in GitHub Desktop.
Save kumarldh/9724624 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hydra-head-vanilla-js.html
<!DOCTYPE html>
<html>
<head>
<title>Hydra - Delete one button & produce two more!</title>
<meta charset="UTF-8">
</head>
<body id="hydrabody">
<button class="hydrahead">Hydra Head</button>
</body>
<script>
document.addEventListener('click', function(e){
if(e.target.className !=='hydrahead'){
return;
}
var bd = document.getElementById('hydrabody');
var lefthead = document.createElement('button');
var righthead = document.createElement('button');
lefthead.setAttribute('class','hydrahead');
lefthead.innerHTML = 'Left Hydra Head';
righthead.setAttribute('class','hydrahead');
righthead.innerHTML = 'Right Hydra Head';
bd.removeChild(e.target);
bd.appendChild(lefthead);
bd.appendChild(righthead);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment