<body>
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value=" 7 " onclick="7"/></td>
<td><input type="button" value=" 8 " onclick="8"/></td>
<td><input type="button" value=" 9 " onclick="9"/></td>
<td><input type="button" value=" + " onclick="plus()"/></td>
</tr>
<tr>
<td><input type="button" value=" 4 " onclick="4"/></td>
<td><input type="button" value=" 5 " onclick="5"/></td>
<td><input type="button" value=" 6 " onclick="6"/></td>
<td><input type="button" value=" - " onclick="subtract()"/></td>
</tr>
<tr>
<td><input type="button" value=" 1 " onclick="1"/></td>
<td><input type="button" value=" 2 " onclick="2"/></td>
<td><input type="button" value=" 3 " onclick="3"/></td>
<td><input type="button" value=" * " onclick="times()"/></td>
</tr>
<tr>
<td><input type="button" value=" 0 " onclick="0"/></td>
<td><input type="button" value=" . " onclick="."/></td>
<td><input type="button" value=" = " onclick="total()"/></td>
<td><input type="button" value=" / " onclick="divide()"/></td>
</tr>
</table>
</form>
</center>
</body>
I'm making a calculator. How do I make the input from the button display on the textarea? I have to make the numbers display on the text area like a normal calculator. I can't use jquery because we haven't learned it yet.
To add the numbers to the textarea you can use this code:
var button = document.querySelectorAll('input[type=button]');
for(var x=0; x<button.length; x++)
{
button[x].addEventListener('click', function(e) {
var a = document.getElementById('txt').value;
document.getElementById('txt').value = a + this.value;
});
}
If you want a list of all elements that match a selector, you can use document.querySelectorAll() and loop through the object list.
You will need to alter your html and delete all the wrong onclicks, you too should use the value attribute only for the actual value and not for code styling, as the output will include your spaces, too.
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" id="txt" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value="7"/></td>
<td><input type="button" value="8"/></td>
<td><input type="button" value="9"/></td>
<td><input type="button" value="+" /></td>
</tr>
<tr>
<td><input type="button" value="4" /></td>
<td><input type="button" value="5" /></td>
<td><input type="button" value="6" /></td>
<td><input type="button" value="-" /></td>
</tr>
<tr>
<td><input type="button" value="1" /></td>
<td><input type="button" value="2"/></td>
<td><input type="button" value="3" /></td>
<td><input type="button" value="*" /></td>
</tr>
<tr>
<td><input type="button" value="0" /></td>
<td><input type="button" value="." /></td>
<td><input type="button" value="="/></td>
<td><input type="button" value="/" /></td>
</tr>
</table>
</form>
</center>
I didn't implement the calculating functions, but I hope this is enough for you to start with.
Simplistically, you can do:
<input type="button" value="7" onclick="this.form.txtResult.value = this.value">
However, you may want to add a listener to each button that is a number that does the same thing. The easiest way to do that is to add a class to the number buttons and give them all the same listener, so:
<input type="button" value="7" class="numberButton">
and use the load event to add the listeners:
window.onload = function() {
var buttons = document.querySelectorAll('.numberButton');
for (var i=0, iLen=buttons.length; i<iLen; i++) {
buttons[i].onclick = function(){
this.form.txtResult.value += this.value;
};
}
};
You can also add specific listeners for the other buttons.
PS. To get the buttons all the same size, use styles to set the width the same, don't use the value.
Related
I'm trying to recreate a simple program of mine using lit instead of just basic js, but adding import statements seems to break every function.
Things seem to work just fine with "type": "module" alone in my package.json, but the second I change type="text/javascript" to type="module" in my script link within my html, or when I add:
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
to the top of my app.js, or even both in combination, none of my functions seem to work anymore.
I tried changing the scope of my functions as suggested in this thread: Functions not working when ```type="module"``` or import , but that didn't seem to have any effect.
Here is an example of one such function:
function initialize()
{
xWins = window.sessionStorage.getItem('xWins');
oWins = window.sessionStorage.getItem('oWins');
draws = window.sessionStorage.getItem('draws');
if(xWins == null) { xWins = 0; }
if(oWins == null) { oWins = 0; }
if(draws == null) { draws = 0; }
document.getElementById('numXWins').innerHTML = "X WINS: " +xWins;
document.getElementById('numOWins').innerHTML = "O WINS: " +oWins;
document.getElementById('numDraws').innerHTML = "DRAWS: " +draws;
}
Is there something I'm missing? How can I keep my functions working after I add import statements?
EDIT: Added my index.html for completion's sake
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./app.js" defer></script>
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</head>
<body onload="initialize();">
<h3>Tic Tac Toe</h3>
<p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>
<table id="scoreboard">
<thead>
<tr>
<td id="numXWins">X WINS</td>
<td id="numOWins">O WINS</td>
<td id="numDraws">DRAWS</td>
</tr>
</thead>
<tbody>
<td>0</td>
<td>0</td>
<td>0</td>
</tbody>
</table>
<br>
<table id="gameboard">
<tr>
<td><input type="button" name="gamecell" value=" " class="0,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="0,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="0,2" onclick="play(this);"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="1,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="1,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="1,2" onclick="play(this);"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="2,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="2,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="2,2" onclick="play(this);"></td>
</tr>
</table>
<p id="caption" value="Current Turn: X">Current Turn: X</p>
<input type="button" id="rematch" value="Rematch?" onclick="rematch();">
</body>
</html>
The best thing you can do is that everything is an element, like for example in the snippet below.
<script type="module">
import {
LitElement,
} from "https://unpkg.com/lit-element/lit-element.js?module";
import {html} from "https://unpkg.com/lit/static-html.js?module";
class MyElement extends LitElement {
constructor() {
super();
}
play(e) {
console.log('play');
e.target.value = 'X';
}
rematch() {
console.log('rematch');
}
render() {
return html`
<h3>Tic Tac Toe</h3>
<p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>
<table id="scoreboard">
<thead>
<tr>
<td id="numXWins">X WINS</td>
<td id="numOWins">O WINS</td>
<td id="numDraws">DRAWS</td>
</tr>
</thead>
<tbody>
<td>0</td>
<td>0</td>
<td>0</td>
</tbody>
</table>
<br>
<table id="gameboard">
<tr>
<td><input type="button" name="gamecell" value=" " class="0,0" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="0,1" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="0,2" #click="${this.play}"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="1,0" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="1,1" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="1,2" #click="${this.play}"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="2,0" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="2,1" #click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="2,2" #click="${this.play}"></td>
</tr>
</table>
<p id="caption" value="Current Turn: X">Current Turn: X</p>
<input type="button" id="rematch" value="Rematch?" #click="${this.rematch}">`
}
}
customElements.define("my-element", MyElement);
</script>
<my-element></my-element>
so for some reason my table comes out wonky and unfinished looking and off place i cant figure out what i did wrong and i am stuck could someone please help me out
problems the script wont let me edit or save anything also random text box next to add row and total is messed up tooenter image description here
<!DOCTYPE html>
<html>
<head>
<script>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var fforder=document.getElementById("fforder_row"+no);
var ffaddress=document.getElementById("ffaddress_row"+no);
var ffstatus=document.getElementById("ffstatus_row"+no);
var ffdate=document.getElementById("ffdate_row"+no);
var fftotal=document.getElementById("fftotal_row"+no);
var fforder_data=fforder.innerHTML;
var ffaddress_data=ffaddress.innerHTML;
var ffstatus_data=ffstatus.innerHTML;
var ffdate_data=ffdate.innerHTML;
var fftotal_data=fftotal.innerHTML;
fforder.innerHTML="<input type='text' id='fforder_text"+no+"' value='"+fforder_data+"'>";
ffaddress.innerHTML="<input type='text' id='ffaddress_text"+no+"' value='"+ffaddress_data+"'>";
ffstatus.innerHTML="<select id='ffstatus_text"+no+"' value='"+ffstatus_data+"'><option value>-select-</option><option value='FF'>Shipped</option><option value='RF'>Delivered</option><option value='PF'>Canceled</option><option value='DF'>Open</option></select>";
ffdate.innerHTML="<input type='date' id='ffdate_text"+no+"' value='"+ffdate_data+"'>";
fftotal.innerHTML="<input type='text' id='fftotal_text"+no+"' value='"+fftotal_data+"'>";
}
function save_row(no)
{
var fforder_val=document.getElementById("fforder_text"+no).value;
var ffaddress_val=document.getElementById("ffaddress_text"+no).value;
var e =document.getElementById("ffstatus_text"+no);
var ffstatus_val=e.options[e.selectedIndex].text;
var ffdate_val=document.getElementById("ffdate_text"+no).value;
var fftotal_val=document.getElementById("fftotal_text"+no).value;
document.getElementById("fforder_row"+no).innerHTML=fforder_val;
document.getElementById("ffaddress_row"+no).innerHTML=ffaddress_val;
document.getElementById("ffstatus_row"+no).innerHTML=ffstatus_val;
document.getElementById("ffdate_row"+no).innerHTML=ffdate_val;
document.getElementById("fftotal_row"+no).innerHTML=fftotal_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_fforder=document.getElementById("new_fforder").value;
var new_ffaddress=document.getElementById("new_ffaddress").value;
var new_ffstatus=document.getElementById("new_ffstatus").value;
var new_ffdate=document.getElementById("new_ffdate").value;
var new_fftotal=document.getElementById("new_fftotal").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='fforder_row"+table_len+"'>"+new_fforder+"</td><td id='ffaddress_row"+table_len+"'>"+new_ffaddress+"</td><td id='ffstatus_row"+table_len+"'>"+new_ffstatus+"</td><td id='ffdate_row"+table_len+"'>"+new_ffdate+"</td><td id='fftotal_row"+table_len+"'>"+new_fftotal+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_fforder").value="";
document.getElementById("new_ffaddress").value="";
document.getElementById("new_ffstatus").value="";
document.getElementById("new_ffdate").value="";
document.getElementById("new_fftotal").value="";
}</script>
</head>
<body>
<h2>Orders</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Order Number</th>
<th>Address</th>
<th>Order Status</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr id="row1">
<td id="fforder_row1">#123333</td>
<td id="ffaddress_row1">38923 Trevors Lane</td>
<td id="ffstatus_row1">Shipped</td>
<td id="ffdate_row1">2020-12-21</td>
<td id="fftotal_row1">10.00</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="fforder_row2">#233442</td>
<td id="ffaddress_row2">39002 Joint Ave</td>
<td id="ffstatus_row2">Delivered</td>
<td id="ffdate_row2">2020-12-21</td>
<td id="fftotal_row2">102.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="fforder_row3">#990202</td>
<td id="ffaddress_row3">29783 Marc Jobs NE</td>
<td id="ffstatus_row3">Open</td>
<td id="ffdate_row3">2020-12-21</td>
<td id="fftotal_row3">1,020.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_fforder"></td>
<td><input type="text" id="new_ffaddress"></td>
<td>
<select name="ffstatus" id="new_ffstatus">
<option value="">-select-</option>
<option value="FF">Shipped</option>
<option value="RF">Delivered</option>
<option value="PF">Canceled</option>
<option value="DF">Open</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
<td><input type="text" id="new_fftotal"></td>
</tr>
</table>
</div>
</body>
</html>
I recommend using the plugin datatable. Because it is flexible and allows basic operations (add, modify, delete rows).
Am working on project where i need to display dynamic table using database. Am able to display table but while passing values to another page for editing table am getting problem. Am able to pass only first row of the table. Am using javascript for passing value. Please help me. This is what I have tried till now
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<%
if(rs != null){
while(rs.next()){
%>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" id="dd" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(3)%>" name="two" id="two"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(4)%>" name="thr" id="thr"/></td>
<td><input style="border:0px; width:90px" type="text" value="<%=rs.getString(5)%>" name="fr" id="fr"/></td>
<td><input style="border:0px; width:100px" type="text" value="<%=rs.getString(6)%>" name="fve" id="fve"/></td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun()" value="Update"></td>
</tr>
<% } }
else { out.println("No Record Found"); } %>
</tbody>
</table>
This is my Jscript function
<script>
function myFun(){
var v1 = document.getElementById("one").value;
var v2 = document.getElementById("two").value;
var v3 = document.getElementById("thr").value;
var v4 = document.getElementById("fr").value;
var v5 = document.getElementById("fve").value;
var dd = document.getElementById("dd").value;
window.location.href='DCM_UsrShiftUpdt.jsp?v1='+v1+'&v2='+v2+'&v3='+v3+'&v4='+v4+'&v5='+v5+'&dd='+dd;
}
</script>
Kindly response. Thanks in advance.
Problem with your code is duplicate ids, use dynamic ids, lets take row id:
if(rs != null){
int rowId = 1;
while(rs.next()){ %>
<tr>
<td style="font-weight: bold;"><input style="border:0px; width:100px" name="dd" id="dd<%=rowId%>" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one<%=rowId%>"/></td>
.... so on for other <td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun(<%=rowId%>)" value="Update"></td>
</tr>
<%
rowId++;
}
}
JS
function myFun(rowId){
var v1 = document.getElementById("one"+rowId).value;
//so on for the rest
}
P.S. avoid using JSP scriptlets and use JSTL instead.
IDs need to be UNIQUE. Use parentNode's siblings to gather the input values for the row the button is in
var buts = document.querySelectorAll("[value=Update]");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
var cells = this.parentNode.parentNode.cells, parms = [];
for (var i=0;i<cells.length-1;i++) { // stop at the button
var input = cells[i].querySelector("input");
parms.push(input.name+"="+input.value)
}
console.log(parms.join("&"));
}
}
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
</tbody>
</table>
This is a work in progress (a calculator and some other stuff), but what I'm trying to do at the moment is whenever you type in some number into the results of the calculator, and you press "+" the onclick will call checkValidity which will determine if what you typed in was integer or not integer. It will send an alert saying integer or not an integer. My issue is that the onclick won't do anything. I tried emptying the checkValidity function of everything but alert("test); and it still won't work. Could someone please explain what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript>">
function checkValidity()
{
var Calculator = document.getElementById("Calculator")
if (Calculator.Result.value === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
<form name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValidity()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
</head>
</html>
try this it worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="Calculator" name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValid()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
<script type="text/JavaScript">
function checkValid()
{
var Calculator = document.getElementById("Calculator")
var test =Calculator[4].value;
if (parseInt(Calculator[4].value) === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
</body>
</html>
You made a few small mistakes that caused your code to not work.
I'll explain them after this working example:
function validate() {
if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
alert("Integer!");
} else {
alert("Not an integer, press C");
}
}
<body>
<form name="Calculator">
First name: <br /><input type="text" name="firstname" /><br />
Last name: <br /><input type="text" name="lastname" /><br />
Student ID: <br /><input type="text" name="ID" /><br />
Biography: <br /><textarea maxlength=30 rows="2" cols="30"></textarea><br />
Result:
<table border="1" style="width:100%;">
<input type="text" name="Result" size="12" />
<tr>
<td><input type="button" name="zero" value="0" onclick="Calculator.Result.value += '0'" /> </td>
<td><input type="button" name="one" value="1" onclick="Calculator.Result.value += '1'" /></td>
<td><input type="button" name="two" value="2" onclick="Calculator.Result.value += '2'" /></td>
<td><input type="button" name="three" value="3" onclick="Calculator.Result.value += '3'" /></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="Calculator.Result.value += '4'" /></td>
<td><input type="button" name="five" value="5" onclick="Calculator.Result.value += '5'" /></td>
<td><input type="button" name="six" value="6" onclick="Calculator.Result.value += '6'" /></td>
<td><input type="button" name="seven" value="7" onclick="Calculator.Result.value += '7'" /></td>
</tr>
<tr>
<td><input type="button" name="eight" value="8" onclick="Calculator.Result.value += '8'" /></td>
<td><input type="button" name="nine" value="9" onclick="Calculator.Result.value += '9'" /></td>
<td><input type="button" name="plus" value="+" onclick="validate()" /></td>
<td><input type="button" name="minus" value="-" onclick="Calculator.Result.value += '-'" /></td>
</tr>
<tr>
<td><input type="button" name="equals" value="=" onclick="Calculator.Result.value = eval(Calculator.Result.value)" /></td>
<td><input type="button" name="divide" value="/" onclick="Calculator.Result.value += '/'" /></td>
<td><input type="button" name="multiply" value="*" onclick="Calculator.Result.value += '*'" /></td>
<td><input type="button" name="clear" value="C" onclick="Calculator.Result.value = ''" /></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<input type="button" name="Save" value="Save" onclick="Calculator.HoursWorkedThisWeek = Calculator.Result.value" />
<input type="button" name="Submit" value="Submit" />
</form>
</body>
(fiddle: http://jsfiddle.net/z8umk2c6/6/)
You had all your elements inside the <head> tag. Only the <script> should be inside the head (or better yet, in a separate JS-file), all the HTML elements should be inside a <body> tag.
Your form didn't have an id, only a name. Therefor the variable Calculator (bad practice to use uppercase for variable-names) referred to nothing. In your case you don't even need the variable, because you just access the form by name directly, so I removed that variable at the start of the function.
(I recommend using ID's instead of names however, but that might just be personal preference.)
The === in the if-clause didn't work, it was too strict. == will work however.
"test" in the if-clause was nothing, it had no value. I rewrote the if-clause so that the value is checked against the integer-value of itself. If that integer-value is equals the original value, you know the original was an integer already.
And a few other mistakes that may or may not break the code, but were bad practice non the less:
OnClick should be onclick (all lowercase). Same goes for Name and Value.
Some <input> were written with an uppercase: <Input>.
<br> and <input> need their own closing tags, like so: <br /> and <input />
I had to create a simple calculator to handle basic math problems. I created the calculator using a table, and a text form to hold the solution. Each button is supposed to set the variable inputString equal to the return value of the updateString() function.
<table class = "calculator">
<tr>
<td colspan='4'>
<form action="">
<div class="calc">
<input type="text" value=""/>
</div>
</form>
</td>
</tr>
<tr>
<td><input class="calc" type="button" value="1" onclick="inputString = updateString('1');"/></td>
<td><input class="calc" type="button" value="2" onclick="inputString = updateString('2');"/></td>
<td><input class="calc" type="button" value="3" onclick="inputString = updateString('3');"/></td>
<td><input class="calc" type="button" value='/' onclick="inputString = updateString('/');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="4" onclick="inputString = updateString('4');"/></td>
<td><input class="calc" type="button" value="5" onclick="inputString = updateString('5');"/></td>
<td><input class="calc" type="button" value="6" onclick="uinputString = updateString('6');"/></td>
<td><input class="calc" type="button" value='*' onclick="inputString = updateString('*');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="7" onclick="inputString = updateString('7');"/></td>
<td><input class="calc" type="button" value="8" onclick="inputString = updateString('8');"/></td>
<td><input class="calc" type="button" value="9" onclick="inputString = updateString('9');"/></td>
<td><input class="calc" type="button" value='-' onclick="inputString = updateString('-');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="0" onclick="inputString = updateString('0');"/></td>
<td><input class="calc" type="button" value='.' onclick="inputString = updateString('.');"/></td>
<td><input class="calc" type="button" value='C' onclick="inputString = updateString('C');"/></td>
<td><input class="calc" type="button" value='+' onclick="inputString = updateString('+');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value='=' onclick="document.forms[0].value = eval(inputString);"/></td>
</tr>
</table>
This is the function that I created to handle the updating of the String with each button press
function updateString(p1){
var inputString;
inputString += p1;
return inputString;
}
Add an ID to the input field
<div class="calc">
<input id="outputBox" type="text" value="" />
</div>
And set it's value to the inputString
function updateString(p1){
inputString += p1;
document.getElementById("outputBox").value = inputString;
return inputString;
}
jsFiddle Demo
The final calculation (=) works the same way
onclick=" document.getElementById('outputBox').value = eval(inputString);"
From what I understood of your question, to solve it, you can use JQuery that'll allow you to display the returned value in the DOM
function updateString(p1){
var inputString;
inputString += p1;
$('.your-text-box').val(inputString);
}