This is one of the simple javascript used to display text or numbers using button. This type of concept helps to implement the application like Calculator.
It is show the particular text when click the particular button and when click the another button the previous text will hide and the current text will display this type of concept will use some of the applications. The below image shows how the example looks and the demo also available see the demo while click the demo button
It is show the particular text when click the particular button and when click the another button the previous text will hide and the current text will display this type of concept will use some of the applications. The below image shows how the example looks and the demo also available see the demo while click the demo button
<script type="text/javascript">
var showValue = function(val){
document.getElementById('pressed').value = String(val);
}
</script>
<style>
input{
width:500px;
height:50px;
border:1px solid pink;
padding:10px;
text-indent:20px;
font-size:18px;
}
</style>
</head>
<body>
<p><input type="text" id="pressed" value="" /></p>
<p>
<button onclick="showValue('Text')">Text</button>
<button onclick="showValue(1)">1</button>
<button onclick="showValue(2)">2</button>
<button onclick="showValue(3)">3</button>
<button onclick="showValue(4)">4</button>
<button onclick="showValue(5)">5</button>
<button onclick="showValue(6)">6</button>
<button onclick="showValue(7)">7</button>
<button onclick="showValue(8)">8</button>
<button onclick="showValue(9)">9</button>
<button onclick="showValue(0)">0</button>
</p>
var showValue = function(val){
document.getElementById('pressed').value = String(val);
}
</script>
<style>
input{
width:500px;
height:50px;
border:1px solid pink;
padding:10px;
text-indent:20px;
font-size:18px;
}
</style>
</head>
<body>
<p><input type="text" id="pressed" value="" /></p>
<p>
<button onclick="showValue('Text')">Text</button>
<button onclick="showValue(1)">1</button>
<button onclick="showValue(2)">2</button>
<button onclick="showValue(3)">3</button>
<button onclick="showValue(4)">4</button>
<button onclick="showValue(5)">5</button>
<button onclick="showValue(6)">6</button>
<button onclick="showValue(7)">7</button>
<button onclick="showValue(8)">8</button>
<button onclick="showValue(9)">9</button>
<button onclick="showValue(0)">0</button>
</p>
0 Comments