Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="one">
    <p>Box 1</p>
  </div>
  
  <div class="two">
    <p>Box 2</p>
  </div>
  
  <div class="three">
    <p>Box 3</p>
  </div>
  
  <div class="four">
    <p>Box 4</p>
  </div>
  
  <div class="five">
    <p>Box 5</p>
  </div>
  
  <output></output>
  
  <button>50, 50</button>
  
  <button>50, 140</button>
  
  <button>50, 300</button>
  
  <button>50, 400</button>
  
  <button>50, 520</button>
</body>
</html>
 
body {
  font-family: Arial;
  text-align: center;
}
div {
  min-height: 100px;
  border: solid 1px;
  margin-bottom: 20px;
  line-height: 70px;
}
button {
  display: inline-block;
  margin-right: 10px;
}
output {
  font-weight: bold;
  display: block;
  margin-top: 20px;
}
 
var btns = document.getElementsByTagName('button'),
    op   = document.querySelector('output');
btns[0].addEventListener('click', function () {
  op.innerHTML = document.elementFromPoint(50, 50).innerText + ' chosen.';
}, false);
btns[1].addEventListener('click', function () {
  op.innerHTML = document.elementFromPoint(50, 140).innerText + ' chosen.';
}, false);
btns[2].addEventListener('click', function () {
  op.innerHTML = document.elementFromPoint(50, 300).innerText + ' chosen.';
}, false);
btns[3].addEventListener('click', function () {
  op.innerHTML = document.elementFromPoint(50, 400).innerText + ' chosen.';
}, false);
btns[4].addEventListener('click', function () {
  op.innerHTML = document.elementFromPoint(50, 520).innerText + ' chosen.';
}, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers