I'm trying to input 2 parameters and output it an another TEXTBOX.
This is my code:
<!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
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(parseInt(document.getElementById('X').value),parseInt(document.getElementById('Y').value))">Try it</button>
What is wrong here? I tried this to show the result as simple paragraph and I succeed, but I need to display it in a textbox.
Replace this:-
document.getElementById("Z").innerHTML = z;
with
document.getElementById("Z").value = z;
An <input> element uses value and not innerHTML:
document.getElementById("Z").value = z;
Related
/* This code is for addition and im trying to get the number thats printed out to appear in orange not black */
<script type="text/javascript">
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
}
document.getElementById("addBy").style.color = "#ff0000";
</script>
/* This is the html used in the code */
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input type="text" name="txtres" <br>
<input type="button" value="Add" onClick="addBy()">
</form>
</body>
</html>
So basically in the function im trying to get the number thats printed out to come out in red
Try this..
<script type="text/javascript">
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
document.getElementById("txtres").style.color = "#ff0000";
}
</script>
try this.
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
}
document.getElementById("txt_AddBy").style.color = "#ff0000";
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input id="txt_AddBy" type="text" name="txtres" disabled="disabled"/> <br>
<input type="button" value="Add" onClick="addBy()"/>
</form>
</body>
</html>
Here is the snipped handling the divide operation also.
function calc(type)
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
switch(type){
case 'add' : {
res=num1+num2;
document.formcalc.txtres.value=res;
document.getElementById("txt_AddBy").style.color = "#ff0000";
break;
}
case 'division' : {
res=num1/num2;
document.formcalc.txtres.value=res;
document.getElementById("txt_AddBy").style.color = "blue";
break;
}
}
}
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input id="txt_AddBy" type="text" name="txtres" disabled="disabled"/> <br>
<input type="button" value="Add" onClick="calc('add')"/>
<input type="button" value="Divide" onClick="calc('division')"/>
</form>
</body>
</html>
You forgot to give your 'Answer' input tag the id "addBy" (i.e id = "addBy") which you referenced in your JavaScript code. Also close the tag.
**UPDATED ANSWER:
Improved answer after coming back and looking at the question again.
First, your input tag needs to be closed:
<input type="text" name="txtres" id="answer" />
I have also given it an id of answer which will be used make a reference to it in the JavaScript code.
Second, in your JavaScript code, change the line that styles the input to:
document.getElementById("answer").style.color = "#ff0000";
To avoid confusion with the function named addBy, I changed the selector in the getElementById call to answer in quotes. This is why I gave the id attribute the value of "answer" earlier in the input element for the result.
I need to do a simple homework where you enter two integers in two text fields of a form and then you compute the sum and you print it in a "text field (not editable)". My program seems to work but it prints the right output and immediately reload the page. I want the page to remain with the printed output if the user does not click again on "submit" button
Here is my code HTML & JS :
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form>
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
</html>
When form is submited, the page will be reloaded. To prevent this you should change input type attribute from submit to button.
<input type="submit" value="Submit" onClick="updateExpr()"/>
to
<input type="button" value="Submit" onClick="updateExpr()"/>
You can simply avoid server call by changing your form tag
<form onSubmit="return false">
You dont really need a form to do something like this.
Forms send values to the backend, e.g. a server.
You only want to manipulate some front-end elements like a container to have some new text inside it.
a <form> tag typically sends you to some URI with some aprameters,
this is done by the actions attribute.
<form action="addnames.php">
for example would call the addnames.php script on your server...
You dont need a server tho..look below:
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum =x1 +x2;
document.getElementById("sum").innerHTML = sum;
}
<h2>HTML Forms</h2>
First name:<br>
<input id="n1" type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input id="n2" type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" onclick="updateExpr()">Submit</button>
<div id="sum">
</div>
<script>
</script>
I would recommand you to add onSubmit method to the form instead of onclick to the input.
Also you better add a return : false to your function and add onsubmit="return updateExpr()".
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form onsubmit="return updateExpr()">
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
Another way of doing this would have been to add a button outside of the form linked to the function by onclick event
juste add preventDefault(), like this
function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
<html>
<head>
<title>JavaScript - using function</title>
<script>
function add(){
var value1=document.getElementById("n1").value;
var value2=document.getElementById("n2").value;
document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);
}
</script>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onClick="add()" />
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>
I am new to JavaScript and wanted to create a script that add numbers up. After pressing "Add" button, I cannot get the result to be displayed. How to get the result displayed?
Two things wrong here...
1)
<input type="button" value="Add" /> change it to
<input type="button" value="Add" onclick="add()" />
Also,
2)
document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);
to
document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);
PS : This is not a assignment solving website :P
First, You Should Change
document.getElementById("result").value = value1 + value2
To This:
document.getElementById("result").innerHTML = n1 + n2
Because value stands for the attribute value for < input >, not the text written
in the tag.
Second, Change The Button Code To:
<input type="button"value="Add"onclick="add()">
This "onclick" is something called event in javascript,
It means at clicking on the button "Add" it performs the funtion called "add()".
If You Are New To Javascript You Will Know Everything.
Just Be Patient.
It worked with the following changes
-> calling add function with onclick event
-> using innerhtml in place of value
<html>
<head>
<title>JavaScript - using function</title>
<script>
function add(){
var value1=document.getElementById("n1").value;
var value2=document.getElementById("n2").value;
console.log(value1,value2)
document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);
}
</script>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onclick="add()"/>
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>
Hope this helps
Its better to put the js at the end of the document - also as noted the onclick handler needs to call the function. I also tidied up the code a little.
<html>
<head>
<title>JavaScript - using function</title>
<style>label{display:block}</style>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onclick="add()">
<p>Result = <span id="result" ></span></p>
<script>
function add(){
var value1=parseFloat(document.getElementById("n1").value);
var value2=parseFloat(document.getElementById("n2").value);
var total= value1 + value2;
document.getElementById("result").innerText=total;
}
</script>
</body>
</html>
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/