I have started learning javascript prior to work experience with a website coding business. I have coded this, but when i run the .html file, i get a blank web page. I do not know what i have done wrong. Here is the code:
<html>
<body>
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1"/></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2"/></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3"/></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" name="calcbox4"/></p>
</form>
<script>
function check(form) {
var input4 = 0;
if( form.calcbox2.value == "+" ) {
input4 = form.calcbox1.value + form.calcbox3.value;
}
if( input2 == "-" ) {
input4 = form.calcbox1.value - form.calcbox3.value;
}
if( input2 == "*" ) {
input4 = form.calcbox1.value * form.calcbox3.value;
}
if( input2 == "/" ) {
input4 = form.calcbox1.value / form.calcbox3.value;
}
}
document.all.calcbox4.value = input4;
</script>
<script>
document.write(input4);
</script>
</body>
</html>
Thanks in advance for anyone who can help :)
You could assign first the values of the inputs, convert it to number with an unary + and perfor a check for the operator. The assign it with document.getElementById('calcbox4') to the value property of the input.
The reason for a blank page is the last document.write(input4);, which rewites the page.
document.all.calcbox4.value works only for old Internet Explorer. It is not a standard to assign a value.
function check(form) {
var input1 = +form.calcbox1.value,
operator = form.calcbox2.value,
input3 = +form.calcbox3.value,
output = 0;
if (operator == "+") {
output = input1 + input3;
}
if (operator == "-") {
output = input1 - input3;
}
if (operator == "*") {
output = input1 * input3;
}
if (operator == "/") {
output = input1 / input3;
}
document.getElementById('calcbox4').value = output;
}
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1" /></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2" /></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3" /></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!" /></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" id="calcbox4" /></p>
</form>
You can use simple switch case and in your case you are not converting the text into integer you have to convert text to int using parseint
function check(form) {
var input4 = 0;
//first input value
var input1 = parseInt(form.calcbox1.value);
//thrid input value
var input3 = parseInt(form.calcbox3.value);
switch(form.calcbox2.value)
{
case "+":
input4 = input1 + input3;
break;
case "-":
input4 = input1 - input3;
break;
case "*":
input4 = input1 * input3;
break;
case "/":
input4 = input1 / input3;
break;
}
document.all.calcbox4.value = input4;
}
<html>
<body>
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1"/></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2"/></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3"/></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" name="calcbox4"/></p>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function clearFields(val)
{
document.getElementById("expression").value=val;
}
function v(val)
{
document.getElementById("expression").value+=val;
}
function eva(e)
{
try
{
clearFields(eval(document.getElementById("expression").value))
}
catch(e)
{
clearFields('Error')
}
}
validate = function(evt)
{
// Check if the keys are numbers and arithmetic operator.
// For a cross-browser solution, use the "which" property together with keyCode.
if ([8, 13,35,46,37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36,96, 97, 98,99,100,101,102,103,104,105,106,107,109,110,111].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;// Stopping non-numeric keystrokes from reaching an edit field.
if(evt.preventDefault){evt.preventDefault();} // For event cancellation. It tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be.
}
}
function checkKey(event)
{
if(event.keyCode==13) // Check for ENTER key
eva();
else if(event.keyCode==17) // Check for Ctrl key
clearFields("");
else
validate(event);
}
</script>
</head>
<body>
<div align="center">
</br></br></br></br></br>
<input type="text" id="expression" style="height:50px; width:215px;" onkeydown = "checkKey(event)" />
<p>
<input type="button" value=" / " style="height:50px; width:50px; cursor:pointer; font-weight:bold; background-color: #4CAF50; color:white; border: none; " onclick='v("/")'>
<input type="button" value=" C " style="height:50px; width:160px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='clearFields("")'>
</p>
<p>
<input type="button" value=" 7 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='v("7")'>
<input type="button" value=" 8 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("8")'>
<input type="button" value=" 9 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("9")'>
<input type="button" value=" * " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("*")'>
</p>
<p>
<input type="button" value=" 4 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("4")'>
<input type="button" value=" 5 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("5")'>
<input type="button" value=" 6 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("6")'>
<input type="button" value=" - " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("-")'>
</p>
<p>
<input type="button" value=" 1 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("1")'>
<input type="button" value=" 2 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("2")'>
<input type="button" value=" 3 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("3")'>
<input type="button" value=" + " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("+")'>
</p>
<p>
<input type="button" value=" 0 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("0")'>
<input type="button" value=" . " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v(".")'>
<input type="button" id= "calc" style="height:50px; width:105px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" value=" = " onclick='eva()'>
</p>
<p align="center">Ctrl to Clear Field</p>
</div>
</body>
</html>
Related
I want to have two forms on the same page, one for userregistration, and one for editing a comanys name. This is how I have gotten so far...
test001.js:
$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});
// Validating Form Fields.....
$("#submit").click(function(e) {
var email = $("#email").val();
var comnpanyname = $("#companyname").val();
var lastname = $("#lastname").val();
var password = $("#password").val();
var emailReg = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
if (firstname === '' || lastname === '' || password === '' || email === '') {
alert("Please fill all fields!");
e.preventDefault();
} else if (!(email).match(emailReg)) {
alert("Invalid Email!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
test001.css
#import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
h2 {
text-align:center;
font-size:24px
}
hr {
margin-bottom:30px
}
p {
color:#000;
font-size:16px;
font-weight:700
}
#button,#button2 {
border:1px solid #0c799e;
width:250px;
padding:10px;
font-size:16px;
font-weight:700;
color:#fff;
border-radius:3px;
background:linear-gradient(to bottom,#59d0f8 5%,#49c0e8 100%);
cursor:pointer
}
#button:hover,#button2:hover {
background:linear-gradient(to bottom,#49c0e8 5%,#59d0f8 100%)
}
input[type=text] {
margin-top:5px;
margin-bottom:20px;
width:96%;
border-radius:5px;
border:0;
padding:5px 0
}
#firstname,#lastname,#email,#password,#company {
padding-left:10px
}
input[type=submit] {
width:30%;
border:1px solid #59b4d4;
background:#0078a3;
color:#eee;
padding:3px 0;
border-radius:5px;
margin-left:33%;
cursor:pointer
}
input[type=submit]:hover {
border:1px solid #666;
background:#555;
color:#fff
}
.ui-dialog .ui-dialog-content {
padding:2em
}
/* 960x610 */
div.container {
width:500px;
height:300px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.container2 {
width:960px;
height:610px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.main {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
div.main2 {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Form Example</title>
<link href="http://enersen.no/development/eds/css/test001.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://enersen.no/development/eds/js/user.js" type="text/javascript"></script>
<!-- script src="http://enersen.no/development/eds/js/company.js" type="text/javascript"></script -->
</head>
<body>
<div class="container">
<div class="main">
<div id="dialog" title="Dialog Form">
<form action="" method="post">
<label>First name:</label>
<input id="firstname" name="firstname" type="text">
<label>Last name:</label>
<input id="lastname" name="lastname" type="text">
<label>Email:</label>
<input id="email" name="email" type="text">
<label>Password:</label>
<input id="password" name="password" type="password">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button" type="button" value="Open Dialog Form">
</div>
</div>
<div class="container2">
<div class="main2">
<div id="dialog2" title="Dialog Form 2">
<form action="" method="post">
<label>New comany name:</label>
<input id="company" name="company" type="text">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button2" type="button" value="Open Company Dialog Form">
</div>
</div>
</body>
</html>
I expect the form that I activate to be the one evaluated. Now it is the form for adress-/login-info that gets evaluated. I guess I need some code snipplet that lets med deal with the forms as different documents in Javascript?
You have more than one submit button with the id submit - simply change them to be unique - where you use an id attribute, they should always be unique for the page.
For example, use userRegistrationSubmit for one and then change this:
$("#submit").click(function(e) {
to
$("#userRegistrationSubmit").click(function(e) {
You could call the other companyNameChangeSubmit.
Thanks, Jamiec, you pointed me in the rigth direction and I solved it :-) Here's the result:
$(document).ready(function() {
$(function() {
$("#userDialog").dialog({
autoOpen: false
});
$("#companyDialog").dialog({
autoOpen: false
});
$("#userButton").on("click", function() {
$("#userDialog").dialog("open");
});
$("#companyButton").on("click", function() {
$("#companyDialog").dialog("open");
});
});
// Validating Form Fields.....
$("#userSubmit").click(function(e) {
var email = $("#email").val();
var comnpanyname = $("#companyname").val();
var lastname = $("#lastname").val();
var password = $("#password").val();
var emailReg = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
if (firstname === '' || lastname === '' || password === '' || email === '') {
alert("Please fill all fields!");
e.preventDefault();
} else if (!(email).match(emailReg)) {
alert("Invalid Email!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
I'm programming a calculator for my final high school math project and I can't seem to find how to .search() multiple strings and if the element has at least one then it will work.
function pie(val) {
var pi = document.getElementById("display").value.search("/" | "*" | "-" | "+");
if (pi != -1) {
document.getElementById("display").value += val;
}
else {
document.getElementById("display").value = "Please add an operator";
}
}
I want Pi to only execute if there's an operator because if there's none it just adds PI to whatever number is on the screen.
// Clear Function
function c(val) {
document.getElementById("display").value = val;
}
// Insert Number Function
function insert(val) {
document.getElementById("display").value += val;
}
// Equal Function
function equal(val) {
try {
c(eval(document.getElementById("display").value))
}
catch(equal) {
document.getElementById("display").value = "error";
}
}
// Root Function
function root(val) {
var vroot = document.getElementById("display").value;
var rooted = Math.sqrt(document.getElementById("display").value);
var r = document.getElementById("display").value = rooted;
if (vroot< 0) {
document.getElementById("display").value= "no";
}
}
// Pie Fonction
function pie(val) {
var pi = document.getElementById("display").value.search("/" | "*" | "-" | "+");
if (pi != -1) {
document.getElementById("display").value += val;
}
else {
document.getElementById("display").value = "Please add an operator";
}
}
// Power function : fix so power of any number
function power(val) {
var base = document.getElementById("display").value;
document.getElementById("display").value = base * base;
}
// Log Function
function log(val) {
var vlog = document.getElementById("display").value;
var vloged = Math.log(document.getElementById("display").value);
var v = document.getElementById("display").value = vloged;
if (vlog < 0) {
document.getElementById("display").value= "no";
}
}
function cos(val) {
var vroot = document.getElementById("display").value;
var rooted = Math.sqrt(document.getElementById("display").value);
var r = document.getElementById("display").value = "√" + vroot + "=" + rooted;
}
function sin(val) {
var vroot = document.getElementById("display").value;
var rooted = Math.sqrt(document.getElementById("display").value);
var r = document.getElementById("display").value = "√" + vroot + "=" + rooted;
}
function tan(val) {
var vroot = document.getElementById("display").value;
var rooted = Math.sqrt(document.getElementById("display").value);
var r = document.getElementById("display").value = "√" + vroot + "=" + rooted;
}
.calculator {
text-align: center;
}
.display input {
margin-left: 5px;
font-size: 50px;
width: 600px;
height: 100px;
border-radius: 10px;
background-color: rgb(217, 217, 217);
border-color: rgb(230,230,230, .5);
color: rgb(153, 153, 153);
margin-top: 25px;
}
.display input:focus {
outline:0;
}
.button {
background-color: rgb(230, 230, 230, .5);
font-size: 50px;
height: 100px;
width: 100px;
text-align: center;
margin:3px;
color: rgb(153, 153, 153);
border-radius: 10px;
border-color: rgb(230,230,230, .5);
}
.button:hover {
background-color: white;
}
.button:focus {
outline:0;
}
body {
background-color: rgb(204, 204, 204);
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator </title>
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" id="display">
</div>
<div class="main">
<br>
<center>
<table>
<tr>
<td><input type="button" class="button" value="C" onclick='c("")'></td>
<td><input type="button" class="button" value="π" onclick='pie(Math.PI)'></td>
<td><input type="button" class="button" value="√" onclick='root()'></td>
<td><input type="button" class="button" value="^" onclick='power()'></td>
<td><input type="button" class="button" value="*" onclick='insert("*")'></td>
</tr>
<tr>
<td><input type="button" class="button" value="log" onclick='log()'></td>
<td><input type="button" class="button" value="7" onclick='insert(7)'></td>
<td><input type="button" class="button" value="8" onclick='insert(8)'></td>
<td><input type="button" class="button" value="9" onclick='insert(9)'></td>
<td><input type="button" class="button" value="/" onclick='insert("/")'></td>
</tr>
<tr>
<td><input type="button" class="button" value="cos" onclick='cos()'></td>
<td><input type="button" class="button" value="4" onclick='insert(4)'></td>
<td><input type="button" class="button" value="5" onclick='insert(5)'></td>
<td><input type="button" class="button" value="6" onclick='insert(6)'></td>
<td><input type="button" class="button" value="+" onclick='insert("+")'></td>
</tr>
<tr>
<td><input type="button" class="button" value="sin" onclick='sin()'></td>
<td><input type="button" class="button" value="1" onclick='insert(1)'></td>
<td><input type="button" class="button" value="2" onclick='insert(2)'></td>
<td><input type="button" class="button" value="3" onclick='insert(3)'></td>
<td><input type="button" class="button" value="-" onclick='insert("-")'></td>
</tr>
<tr>
<td><input type="button" class="button" value="tan" onclick='tan()'></td>
<td><input type="button" class="button" value="?" onclick='insert("")'></td>
<td><input type="button" class="button" value="0" onclick='insert(0)'></td>
<td><input type="button" class="button" value="." onclick='insert(".")'></td>
<td><input type="button" class="button" value="=" onclick='equal()'></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
Try to rewrite this line
var pi = document.getElementById("display").value.search("/" | "*" | "-" | "+");
To this:
var pi = ["/", "*", "-", "+"].indexOf(document.getElementById("display").value);
You should use Array.some for this.
It will return true if your value matches any one of the values from Array else false.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
search takes a regular expression. If you are looking for any of those, use /[/*+-]/ as the parameter to search. – Mike McCaughan
He commented it so I don't know how to make it so he solved the question.
I am trying a javascript onchange method
when i select some option in (To->("destination")) it dsn't set any value on price text box
<html>
<head>
<style>
div.newdiv
{
width:980;
background:url("");
}
div
{
display:inline-block;
color:black;
background-color:skyblue;
border:2px solid white;
box-shadow:3px 3px 3px white;
font-weight: 500;
color: #434248;
text-shadow: 0 1px rgba(white, .5);
border-radius: 40px;
width:500;
text-align:center;
}
h3
{
color:white;
}
h1
{
color:white;
background-color:lime;
border:2px solid white;
box-shadow:3px 3px 3px white;
}
body
{
background-color:white;
}
</style>
</head>
<body bgcolor=#CCCCCC>
<script>
function price()
{
var des = document.getElementById("destination").value;
switch (des)
{
case '700': document.getElementById("price").value="700";
break;
case '350': document.getElementById("price").value="350";
break;
case '550': document.getElementById("price").value="550";
break;
case '450': document.getElementById("price").value="450";
break;
default: document.getElementById("price").value="select
destination";
}
}
</script>
<div class=newdiv>
<div>
<h1>Online Booking Form</h1>
<h3><u>To reserve seats please complete and submit the booking form</u></h3>
<form name="f1" method="post" action="jsdropdown.php">
FirstName: <input type="text" name="fname" value="" placeholder=firstname>
<br><br>
LastName:<input type="text" name="lname" value="" placeholder=lastname><br>
<br>
Age: <input type="text" name="age" value="" placeholder=age><br><br>
E-mail: <input type="email" name="email" value=""
placeholder=example#gmail.com><br><br>
Phone Number:<select name="phno">
<option>+91</option>
<option>+12</option>
<option>+325</option>
<option>+487</option>
</select> - <input type="text" name="phno" value="" placeholder=phonenumber>
<br><br>
From:<input type="text" name="from" value="" placeholder=source><br><br>
To:<select id="destination" onchange="price()">
<option value="700">chennai</option>
<option value="350">ooty</option>
<option value="550">bangalore</option>
<option value="450">kerala</select>
<br><br>
Price:<input type="text" id="price" size="20" placeholder=price><br><br>
Bus Type:<select name="bustype">
<option>Ac</option>
<option>Non Ac</option></select><br><br>
Number Of Passengers:<input type="text" name="passenger" value=""
placeholder=passengers><br><br>
Total:<input type="text" name="total" value="" placeholder=total><br><br>
<input type="submit" align="center" name="book" value="BOOK YOUR TICKET">
</form></div></div>
</body>
</html>
destination is a selectbox. to get what you are testing against in your switch statement, you would need to get the value like this:
var destSelect = document.getElementById("destination");
var des = destSelect.options[destSelect.selectedIndex].value;
the way you set the textbox value seems to work. try it out and let me know if it solved your problem!
I have made a console using html,css,javascript
the input does not appears on enter press
the send button should b pressed
how to make it go on enter press
the code is given here please help
/* code goes below*/
<!DOCTYPE html>
<html>
<head>
<title>Konsole</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body>
<style>
body{
monospace
}
body{
color:#52cc29;
background-color:black;
font-family:monospace;
}
div.textarea > textarea{
height:80vh;
width:95%;
font-family:monospace;
font-size:20px;
font-weight:bold;
color:#52cc29;
background-color:black;
border:5px solid white;
}
input.command{
height:30px;
width:70%;
background-color:black;
border:3px solid white;
color:#52cc29;
font-size:15px;
text-align:left;
padding-left:4px;
font-family:monospace;
font-weight:bold;
}
h3{
font-family:monospace;
font-size:20px;
font-weight:bold;
}
input.send{
background-color:black;
color:#52cc29;
font-family:monospace;
font-weight:bold;
height:35px;
width:60px;
font-size:20px;
}
</style>
<script>
function chat(){
var time = new Date();
var hours = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds;
var write = document.getElementById("area2").value;
var read = document.getElementById("area1").value;
var newRead = "you at " +" "+hours+"h:"+min+"m"+" : " + write + "\n" + read;
document.getElementById("area1").value = newRead;
switch(write){
case "#echo.off" : document.getElementById("area1").value = "echo is off";
break;
}
}
</script>
<center>
<h3>Console</h3>
<form id="form1" >
<div class="textarea">
<textarea autocapitalize="off" spellcheck="false"
autocorrect="off" autocomplete="off" id="area1" readonly ></textarea>
</div>
</form>
<form id="form2">
<div class="input">
<input autocapitalize="off" spellcheck="false" autocorrect="off" autocomplete="off" class="command" id="area2" placeholder="type command here"></input>
<input class="send" type="button" id="button" value="send" onclick="chat();">
</div>
</form>
</center>
</body>
</html>
Try this:
<script>
window.addEventListener("keypress",handleKey);
function handleKey(e){
if(e.keyCode == 13){
chat();
}
}
</script>
Im learning programming on my own and I'm doing an calculator in html/js/css. I've seen this code, but i cant figure out the javascript, and I wanted a little help, if you can explain the javascript to me, like a comment if it is easier to you, I would be very thankfull.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="button"]{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
background-color:#606060;
border:1px solid #606060;
display:inline-block;
color:#fff;
font-family:Arial;
font-size:50px;
line-height:28px;
text-decoration:none;
text-align:center;
margin-bottom:1.5px;
margin-left: 1.5px;
margin-right:1.5px ;
margin-top:1.5px ;
height: 75px;
}
input[type="button"]{
width: 184px;
}
#btnC{
width:372.7px;
}
#btn0{
width:374.7px;
}
#btn0,#btndecimal,#btndivide {
margin-right: 0.1px;
}
#btn7,#btn4,#btn1,#btn0,#btnequals {
margin-left: 0.01px;
}
#btnequals {
height: 61px;
width: 944px;
margin-top: 3px;
}
input[type="button"]:active {
position:relative;
background:#989898;
}
input:focus {
outline:0;
}
input[type="Text"] {
padding-left: 10px;
margin-bottom: 1.5px;
font-size: 100px;
background-color: #202020 ;n
height:195px;
width: 935px;
border:none;
color:white;
}
body {
background-color: #080808 ;
overflow: hidden;
}
#about {
font-size: 45px;
}
</style>
</head>
<body>
<FORM name="Keypad" action="">
<input name="ReadOut" id="output" type="Text" size=24 value="0" readonly>
<table>
<tr>
<td><input id="btn7" type="Button" value=" 7 " onclick="NumPressed(7)"></td>
<td><input id="btn8" type="Button" value=" 8 " onclick="NumPressed(8)"></td>
<td><input id="btn9" type="Button" value=" 9 " onclick="NumPressed(9)"></td>
<td colspan="2"><input id="btnC" type="Button" value=" C " onclick="Clear()"></td>
</tr>
<tr>
<td><input id="btn4" type="Button" value=" 4" onclick="NumPressed(4)"></td>
<td><input id="btn5" type="Button" value=" 5 "onclick="NumPressed(5)"></td>
<td><input id="btn6" type="Button" value=" 6 " onclick="NumPressed(6)"></td>
<td><input id="btnplusminus" type="Button" value=" +/- " onclick="Neg()"></td>
<td><input id="btnplus" type="Button" value=" + " onclick="Operation('+')"></td>
</tr>
<tr>
<td><input id="btn1" type="Button" value=" 1 " onclick="NumPressed(1)"></td>
<td><input id="btn2" type="Button" value=" 2 " onclick="NumPressed(2)"></td>
<td><input id="btn3" type="Button" value=" 3 " onclick="NumPressed(3)"></td>
<td><input id="btnmultiply" type="Button" value=" * " onclick="Operation('*')"></td>
<td><input id="btnminus" type="Button" value=" - " onclick="Operation('-')"></td>
</tr>
</table>
<input id="btn0" type="Button" value=" 0 " onclick="NumPressed(0)">
<input id="btndecimal" type="Button" value=" . " onclick="Decimal()">
<input id="btndivide" type="Button" value=" / " onclick="Operation('/')">
<input id="about" type="Button" value="About" onclick="myFunction()"></br>
<input id="btnequals" type="Button" value=" = " onclick="Operation('=')">
</FORM>
<script>
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
</script>
<script>
function myFunction() {
alert("TegTech 2014");
}
</script>
</body>
</html>
I can answer your clarified question about the variables here, however in the future you will have better results asking smaller, more specific questions. If a question is too broad it is easy to get off topic & can be difficult to answer in this format.
The 4 variables look to be:
FKeyPad: This variable contains a reference to the document's keypad. This is where your input will be coming from.
Accumulate: This variable is used to contain the total of any calculations being performed. When the program is added, this number is added to & when the program uses subtraction it is subtracted from.
FlagNewNum: This is a Boolean value that indicates if there are more operations to be performed after the current one is finished.
PendingOp: Contains the next operation to be performed, for example if the next operation is addition this variable will contain '+'.