Dividing 2 input values in javascript - javascript

I am trying to build a form that will calculate average pay. Very simply the calculation needs to be x/y = z. I would like it to autocomplete and not need to submit a form. This is what I have so far, I got close but I am going to insert the code onto a Weebly website and it could not read it. Any help would be massively appreciated!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(output1)
{
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>

OK. There are a number of issues here.
First, your javascript is referring to the HTML element, not it's value.
you need to add ids to the inputs and ensure that you convert the values to numbers.
This might help:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate()
{
var input1Val = Number(document.getElementById("input1").value);
var input2Val = Number(document.getElementById("input2").value);
var result = (input1Val/input2Val);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
<input type="button" value="Go!" onclick="calculate()">
</div>
</form>
</body>
</html>

Following code will work. You have to watch out the difference to understand the problem in your code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
var input1 = document.getElementById("input1").value;
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>

Related

getting an id from css using php

I having a bit of a problem in my code. What I am trying t achieve is that I want to change some contents of CSS like changing the style of a page using javascript inside php, but I have an error saying there is no id or null
<!DOCTYPE html>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"];
echo "<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>";
}
?>
<html>
<head>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form id="name" action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>
You should put script tag in head :
<!DOCTYPE html>
<html>
<head>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"]; ?>
<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>
<?php
}
?>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>

update the scope value in angular

I am new in angular js. I am creating a small app using angular. This is my code:
<input type="text" ng-model="one" ng-change="sum()">
<input type="text" ng-model="two"ng-change="sum()">
<input type="text" ng-model="three"ng-change="sum()">
<input type="text" ng-model="total" >
Controller Code:
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
The sum of all fields works perfectly. But now i want to do when user change the total value then the other fields set the values according the value in total field.
Are You Expecting this??
#test {
background: white;
border: 1px double #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #666;
outline: none;
height:25px;
width: 275px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr><td><b>Value1</b></td><td> <input type="text" id="test" ng-model="one" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 2</b></td><td><input id="test" type="text" ng-model="two" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 3</b> </td><td><input id="test" type="text" ng-model="three" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Total</b> </td><td><input id="test" type="number" ng-model="total" ng-change="newsum()"/> </td></tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
$scope.newsum = function(){
if($scope.total){
var div=$scope.total/3;
var mod=$scope.total%3;
if(mod==0){
$scope.one=div;
$scope.two=div;
$scope.three=div;
}
else{
var str=''+div;
var deci=parseInt(str.split(".")[0]);
$scope.one=deci;
$scope.two=deci;
$scope.three=deci+mod;
}
}
else{
alert("Please Enter the number");
}
}
});
</script>
</body>
</html>

Html forms enter press

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>

Create two columns(lists) of text boxes using jquery

I am trying to create two columns of text boxes which should look like something like the following image:
But it looks something like this:
I used the following code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DHTML with jQuery</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<button id="btnStart">start</button>
<div id="container"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
HTML from the DOM inspector
<html><head>
<script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>
</head>
<body>
<button id="btnStart" style="display: none;">start</button>
<div id="container">
<input type="text" id="txtPlayerId1" placeholder="player 1">
<input type="text" id="txtPlayerId11" placeholder="0">
<input type="text" id="txtPlayerId2" placeholder="player 2">
<input type="text" id="txtPlayerId12" placeholder="0">
<input type="text" id="txtPlayerId3" placeholder="player 3">
<input type="text" id="txtPlayerId13" placeholder="0">
<input type="text" id="txtPlayerId4" placeholder="player 4">
<input type="text" id="txtPlayerId14" placeholder="0">
<input type="text" id="txtPlayerId5" placeholder="player 5">
<input type="text" id="txtPlayerId15" placeholder="0">
<input type="text" id="txtPlayerId6" placeholder="player 6">
<input type="text" id="txtPlayerId16" placeholder="0">
<input type="text" id="txtPlayerId7" placeholder="player 7">
<input type="text" id="txtPlayerId17" placeholder="0">
<input type="text" id="txtPlayerId8" placeholder="player 8">
<input type="text" id="txtPlayerId18" placeholder="0">
<input type="text" id="txtPlayerId9" placeholder="player 9">
<input type="text" id="txtPlayerId19" placeholder="0">
<input type="text" id="txtPlayerId10" placeholder="player 10">
<input type="text" id="txtPlayerId110" placeholder="0">
<input type="text" id="txtPlayerId11" placeholder="player 11">
<input type="text" id="txtPlayerId111" placeholder="0"></div>
<script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
<link rel="stylesheet" href="/iScorecard/resources/css/style.css">
</body></html>
JS
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
$("#btnStart").on('click', function(event) {
createTextBoxes(event, 11);
$("#btnStart").hide();
});
How should I modify the code to create the list of text boxes as shown in the mockup screen.
Yo can accomplish this using css. I can will give you 3 options.
Option 1 - Using only css (with inline-block)
<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
Above css will make all the input type=text elements as inline-block and take the input width as 40% from parent container. Even you change the main container width. inner elements won't affect. it will always show as two columns
Option 2 - Using only css (with float)
<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
}
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>
In HTML I am adding extra class for the container DIV
<div id="container" class="clearfix">
This option is using float instead of inline-block. Here I have added an extra class .clearfix whenever we do a float we need to clear it after the floating elements. otherwise it will affect for below elements as well
Option 3 - Adding specific class to the player input box and score input box
<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$(playerText).attr('class', 'player');
$(scoreText).attr('class', 'score');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
</script>

Replace text nodes

I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input.
This is the html
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
function validatefirst() {
if (document.myform.first_name.value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
this is the css file:
.one {
color:#000;
position:absolute;
top:400px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:400px;
}
So if you can help me out that will be great. Please no jquery. Thank you
I'm not sure quite what you're trying to accomplish with the function-within-a-function. The following does something, not sure if it's what you want or not:
<html>
<head>
<style>
.one {
color:#000;
position:absolute;
top:200px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
<script>
function validatefirst() {
if (document.getElementById("first_name").value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
one_container.appendChild(one);
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
</script>
</body>
</html>

Categories