Here is what I am trying to achieve, but for some reason, it does not work:
Javascript:
<script type="text/javascript">
function calculate() {
var n1 = getElementById("1").value
var n2 = getElementById("2").value
var answer = n1+n2
alert(answer)
}
</script>
HTML:
<form id="form">
<input id="1" type="text" />
<input id="2" type="text" />
<input type="button onClick="calculate()" value="Go" />
</form>
I am not sure where I went wrong, Can someone help please?
You shouldn't start ID's with numbers - in HTML4 and CSS it isn't allowed, in HTML5 it is allowed, but it's not good practice to do so.
Also, in this context it is illegal in HTML5 - as an ID starting with a number requires at least one letter afterwards.
So, firstly replace the numbered ID's with letters/words.
Apart from this, you need to fix the syntax errors mentioned below:
Replace getElementById("id").value with document.getElementById("id").value;
and also replace <input type="button onClick="calculate()" value="Go" />
with <input type="button" onClick="calculate()" value="Go" /> (notice there was a closing " missing for "button").
Here is a working jsFiddle.
Here is the code used in the jsFiddle:
Javascript:
function calculate() {
var n1 = document.getElementById("aItem").value;
var n2 = document.getElementById("bItem").value;
var answer = n1+n2;
alert(answer);
}
HTML:
<form id="form">
<input id="aItem" type="text" />
<input id="bItem" type="text" />
<input type="button" onClick="calculate()" value="Go"/>
</form>
HTML:
<input id="val1" type="text" value="100" />
<input id="val2" type="text" value="200"/>
<input type="button" onclick="calculate()" value="Go" />
JavaScript:
function calculate() {
var n1 = +(document.getElementById("val1").value);
var n2 = +(document.getElementById("val2").value);
var answer = n1+n2;
alert(answer);
}
This will add the 2 numeric values entered rather than concatenating them.
Related
I have a small project I'm working on, and for some reason chrome says that the code below is undefined.
HTML:
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text"></input>
Javascript:
var cleartxt = function() {
document.getElementById("text").value = "";
};
Can someone help me figure out why this is functioning this way?
Your code is working fine. Here is the working snippet.
var cleartxt = function() {
alert('reset working');
document.getElementById("text").value = "";
};
<input type="text" id="text" />
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text"/>
Once you use onclick and call function directly in the dom, you must define a global function and define it before the document fully loaded, eg: put the function definition in the <head>.
The correct way to write an input is
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text">
without closing tag.
You have to declare the function in the head of your html, and you have tu put the input with the "text" id.
First <input> doesn't have a closing tag. Second if you want to use input type="reset" no need for javascript but they must be inside a form.. See the snippet below..
var cleartxt = function() {
document.getElementById("text").value = "";
};
<input type="button" onclick ="cleartxt()" class="rset" value="Clear Text" >
<input type="text" id="text" >
<br />
<br />
<p>With form</p>
<form>
<input type="reset" class="rset" value="Clear Text" >
<input type="text" id="text" >
</form>
Already spent 2 days on this very basic regex
.I want it to validate inputs exactly of 4 characters.And only upper & lower case Letters.No digits or special symbols.But it is invalidating everything including the correct ones.
Can't catch the issue.
Please help.Code below:---
thanks
pkj
<!DOCTYPE html>
<HTML><HEAD>
<TITLE>
RegEx Test
</TITLE>
</HEAD>
<BODY>
<P>
<FORM action="cgi-bin/page2.py"
Type something:<input Id="usrInput" TYPE="text" VALUE="" onblur="chkInput()">
<input Id="ts" TYPE="number" NAME="ts" value=0>
<input id="submit" type="submit" value="Go" >
</FORM>
</P>
<script>
function chkInput(){
var myRgx=new RegExp(/^[a-zA-Z]{4}$/);
var input=document.getElementById("usrInput").innerHTML;
var rslt=myRgx.test(input);
alert(rslt)
}
</script>
</BODY>
To pick value of input type text use .value and not innerHtml
Working Snippet:
function chkInput() {
var myRgx = new RegExp(/^[a-zA-Z]{4}$/);
var input = document.getElementById("usrInput").value;
var rslt = myRgx.test(input);
console.log(rslt)
}
<FORM action="cgi-bin/page2.py">
Type something:
<input Id="usrInput" TYPE="text" VALUE="" onblur="chkInput()">
<input Id="ts" TYPE="number" NAME="ts" value=0>
<input id="submit" type="submit" value="Go">
</FORM>
I am having a problem with my math function below. The depreciationFee variable adds up correctly, but for some odd reason the financeFee variable does not. I am trying to calculate the monthly lease payment of a vehicle. Whenever I submit the numbers for financeFee it shows two number appended to each other rather than added together. Is there a reason the numbers aren't adding up correctly?
$(".submit").click(function() {
function calculateLease() {
var capitalCost = $(".capital-cost").val();
var downPayment = $(".down-payment").val();
var residualCost = $(".residual-cost").val();
var monthTerm = $(".month-term").val();
var moneyFactor = $(".money-factor").val();
var depreciationFee = (((capitalCost - downPayment) - residualCost) / monthTerm);
// THIS IS THE ONE THAT DOESN'T WORK
var financeFee = ((capitalCost - downPayment) + residualCost);
alert(financeFee);
}
calculateLease();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lease-calculator-container">
<h3>LEASE CALCULATOR</h3>
<form method="get">
<input type="text" class="capital-cost" placeholder="MSRP" />
<br />
<input type="text" class="down-payment" placeholder="DOWN PAYMENT" />
<br />
<input type="text" class="residual-cost" placeholder="RESIDUAL" />
<br />
<input type="text" class="month-term" placeholder="TERM IN MONTHS" />
<br />
<input type="text" class="money-factor" placeholder="MONEY FACTOR" />
<br />
</form>
<input type="submit" class="submit" value="CALCULATE" />
<div class="monthly-cost"></div>
<div class="total-cost"></div>
</div>
Do a parseInt(value,10) for intergers or parseFloat(value) for float.
JavaScript appends the values if the data type is not a number.
I'm trying to submit two parameters to be used in a javascript function. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y){
var z=x+y
alert(z)
}
</script>
<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input type="text" x="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" onclick="func1(x,y)">Try it</button>
The error I get is Uncaught ReferenceError: x is not defined How should I define x and y as an input to be put in js function?
https://jsfiddle.net/hmfcLsf2/1/
<body>
<script>
function func1 (x,y){
var z=parseInt(x)+parseInt(y)
alert(z)
}
</script>
<form >
first input:<br>
<input id="y_field" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="x_field" type="text" x="X" value=15>
<br><br>
</form>
<button type="button" onclick="func1(document.getElementById('x_field').value,document.getElementBy Id('y_field').value)">Try it</button>
Use getElementById. See the jsfiddle above.
In the scope the button doesn´t exist the attritubes X and Y. You need to take the element input and access to attr X or Y:
*<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input id="id-x" type="text" x="X" value=15>
<br><br>
<input id="id-y" type="submit" value="Submit">
</form>
<button type="button" onclick="func1(document.getElementById('id-x').x, document.getElementById('id-y').y)">Try it</button>*
Add id to <input>s, and convert their .value into number:
function func1 (x,y){
var z=(+x)+(+y);
alert(z);
}
<form >
first input:<br>
<input type="text" id="Y" name="Y" value=85>
<br>
second input:<br>
<input type="text" id="X" name="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" onclick="func1(document.getElementById('X').value,document.getElementById('Y').value)">Try it</button>
Well the error message is clear: you must define variables if you want to use them. Javascript engine doesn't know what x and y should be in your case.
So you need to select input element first and then take its value. How to select element? You need to identify it somehow. For example by giving it an id:
<input type="text" id="Y" value=85>
<input type="text" id="X" value=15>
I replaced meaningless x, y attributes with id. Then ugly usage would be:
<button type="button" onclick="func1(Number(document.querySelector('#X').value), Number(document.querySelector('#Y').value))">Try it</button>
Of course this is not very convenient to use. There is more modern way to bind event handlers, using addEventListener method. Again, give the button some id:
<button type="button" id="button">Try it</button>
And then all together it will become:
<form>
first input:<br>
<input type="text" id="Y" value=85> <br>
second input:<br>
<input type="text" id="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" id="button">Try it</button>
<script>
document.querySelector('#button').addEventListener('click', function() {
var x = Number(document.querySelector('#X').value),
y = Numberdocument.querySelector('#Y').value);
func1(x, y);
});
function func1 (x, y) {
var z = x + y;
alert(z);
}
</script>
One more important note. You need to pass numbers to func1 function, otherwise + operator will behave weird. The problem here is that input elements value is always a String (numeric string in your case), and + acts like concatenation operator if used with strings. So you need to explicitly cats string to number, for example with Number function.
If you dont want to change anything in your markup, you could simply axtract the values with document.querySelector :
function callFunc() {
func1(parseInt(document.querySelector('[y="Y"]').value),
parseInt(document.querySelector('[x="X"]').value));
}
call callFunc() instead :
<button type="button" onclick="callFunc();">Try it</button>
demo -> http://jsfiddle.net/s2z13q14/
Suppose an entry is made in a textbox. Is it possible to retain the same entered text in a second text box? If so, how is this done?
<html>
<label>First</label>
<input type="text" name="n1" id="n1">
<label>Second</label>
<input type="text" name="n1" id="n1"/>
</html>
<script>
function sync()
{
var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
n2.value = n1.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync()">
<input type="text" name="n2" id="n2"/>
More efficiently it can be done as :
For the one who will see the post now should use best practices of javascript.
<script>
function sync(textbox)
{
document.getElementById('n2').value = textbox.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync(this)">
<input type="text" name="n2" id="n2"/>
<html>
<script type="text/javascript">
function copy()
{
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
n2.value = n1.value;
}
</script>
<label>First</label><input type="text" name="n1" id="n1">
<label>Second</label><input type="text" name="n2" id="n2"/>
<input type="button" value="copy" onClick="copy();" />
</html>
Well, you have two textboxes with the same ID. An Id should be unique, so you should prbably change this.
To set the value from one text box to another a simple call to getElementById() should suffice:
document.getElementById("n1").value= document.getElementById("n2").value;
(assuming, of course you give your secodn text box an id of n2)
Tie this up to a button click to make it work.
This worked for me and it doesn't use JavaScript:
<form name="theform" action="something" method="something" />
<input type="text" name="input1" onkeypress="document.theform.input2.value = this.value" />
<input type="text" name="input2" />
</form>
I found the code here
Use event "oninput". This gives a more robust behavior. It will also trigger the copy function when you copy paste.
You can this way also used copy contents of one textbox to another
function populateSecondTextBox() {
document.getElementById('txtSecond').value = document.getElementById('txtFirst').value;
}
<label>Write Here :</label>
<input type="text" id="txtFirst" onkeyup="populateSecondTextBox();" />
<br>
<label>Will be copied here :</label>
<input type="text" id="txtSecond" />