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
  • …
 
<div class = "box">
    <div id = "display"><input type = "text" readonly size="20" id="btn"></div>
     <div class = "key">
    <p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">
       <input type = "button" class = "button gray" value = "2">
       <input type = "button" class = "button gray" value = "3">
       <input type = "button" class = "button black" value = "+"></p>
    <p><input type = "button" class = "button gray" value = "4">
       <input type = "button" class = "button gray" value = "5">
       <input type = "button" class = "button gray" value = "6">
       <input type = "button" class = "button black" value = "-"></p>
    <p><input type = "button" class = "button gray" value = "7">
       <input type = "button" class = "button gray" value = "8">
       <input type = "button" class = "button gray" value = "9">
       <input type = "button" class = "button black" value = "*"></p>
    <p><input type = "button" class = "button black" value = "%">
       <input type = "button" class = "button gray" value = "0">
       <input type = "button" class = "button black" value = "^">
       <input type = "button" class = "button black" value = "/"></p>
    <p><input type = "button" class = "button black" value = "C">
       <input type = "button" class = "button black" value = "="></p>
</div>
</div>
 
  .box{
    height: 500px;
    width: 400px;
    background-color: red;
  }
  #display{
    background-color: green;
    position: relative;
    top:20px;
    left:50px;
    width:310px;
    height:60px;
  }
  #display input{
    color: black;
    background-color:yellow;
    position:relative;
    left:3px;
    top:3px;
    width:295px;
    height:45px;
  }
  .key{
    position:relative;
    top:15px;
    left:50px;
  }
  .button{
    width:55px;
    height:60px;
    margin-left:15px;
  }
  .button.gray{
    background-color:gray;
  }
  .button.black{
    color:white;
    background-color:black;
  }
</style>
 
    function showNum (input) {
        var display = document.getElementById("btn");
        display.value = input; 
    }
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers