I have a question?
How do I output the value from input x1 and value from input y1 with document.write in Javascript using X and Y as variables?
HTML Code:
<html>
<head>
<script type="text/javascript">
function myFunction() {
var x1 = document.test.x1.value;
var y1 = document.test.y1.value;
var x = parseInt(x1)*parseInt(y1)
document.getElementById("x").value = x;
}
</script>
</head>
<body>
<br>
<form name="test">
inpout<br><br>
<input type="number" name="x1" id="x1" style="width:70px"> X *
<input type="number" name="y1" id="y1" style="width:70px"> Y
<br><br>
<input type="button" name="Solve" value="Solve" onclick="myFunction()" ><br>
<br><br>
OutPut =<output type="number" name="x" id="x" style="width:100px"></output> <br><br>
Documen.write X = .... Y =...
</form>
</center>
</body>
</html>
Thanks!
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<form name="test">
input<br><br>
<input type="number" name="x1" id="x1" style="width:70px"> X *
<input type="number" name="y1" id="y1" style="width:70px"> Y
<br><br>
<input type="button" name="Solve" value="Solve" onclick="myFunction()" ><br>
<br><br>
OutPut =<output type="number" name="x" id="x" style="width:100px"></output> <br><br>
<p id="info"></p>
</form>
<script type="text/javascript">
function myFunction() {
var x1 = document.forms['test']["x1"].value;
var y1 = document.forms['test']["y1"].value;
var x = x1 * y1;
document.getElementById("x").value = x;
document.getElementById("info").innerHTML = "X : " + x1 + " Y : " + y1;
}
</script>
</body>
</html>
Related
Hello I have a problem with such a task I totally don't know how to get down to it, I hope someone will help me to write an application allowing to calculate the sum and the difference of two 2-dimensional numerical tables. Each of these tables should have 2 lines and 3 columns. Input data - the values of individual array elements - enter the keypads. Present the results on screen, on the same website.
My code is below:
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
suma = tablica[0] + tablica[1];
}
document.getElementById("div1").innerHTML = "Suma = " + suma;
</script>
</body>
</html>
First of all the last line of your script is outside the function while it uses a variable that is inside, this will not work but can easily be fixed by moving the line inside the function.
The second issue is that Number converts a string to a number. It does not sum them up. Instead move each input value to it's own Number function and add them together with the + sign.
For the difference in the two numbers you can just subtract one from the other. With Math.abs() we turn the number into a positive. This way we don't need to think about which of the two numbers is higher.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<div id="div2"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value) + Number(input2.value) + Number(input3.value);
tablica[1] = Number(input4.value) + Number(input5.value) + Number(input6.value);
var suma = tablica[0] + tablica[1];
var roznica = Math.abs(tablica[0] - tablica[1]);
document.getElementById("div1").innerHTML = "Suma = " + suma;
document.getElementById("div2").innerHTML = "Różnica = " + roznica;
}
</script>
</body>
</html>
Suma undefined means you never created a variable and then you used it which caused the error below code is working just put all your code inside onclick function so when clicked it calculates and add it to html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
let suma = tablica[0] + tablica[1];
document.getElementById("div1").innerHTML = "Suma = " + suma;
}
</script>
</body>
</html>
I'm just trying to input an number and then add 10% and then take that total and .08% tax. Can you please help me figure out what I'm doing wrong. I sure it is something simple I'm overlooking but I'm new to this and can't figure what is wrong.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Price tool</title>
</head>
<body>
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
<script type="text/javascript">
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
</script>
</body>
</html>
I logged the value of 'cost' in your code when I start with the value 100
var cost = (x * .1) + x;
console.log(cost);
and got a value of '10100'
But if I make sure that x is a number I get the correct value (110)
var cost = (x * .1) + Number(x);
console.log(cost);
And I get 118.8 for the total.
When you retrieve the value from your input control, it comes through as a string value.
var x = form["acertscore"].value; // x is a string
If you convert this to a number immediately you'll avoid additional problems.
var x = Number(form["acertscore"].value); // x is a number
function costCalc() {
var form = document.forms["operation_form"];
var x = Number(form["acertscore"].value);
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name="acertscore" value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
The problem is that your answer number is so long that it tries to display exponents. Because of this, the number gets treated as a string, though you've specified that the output goes into an <input> field with a type of number. Because your answer is not a number, it can't be displayed.
To resolve this, you can parse the output as a float before displaying it:
form["answerbox"].value = parseFloat(answer);
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = parseFloat(answer);
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
Hope this helps!
i m trying to make a simple calculator by javascript ,and i didnt get anything in textbox result.
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1) + parseFloat(x2);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>
Your x1 and x2 refer to the input box rather than to the value. Change to:
var x1 = document.getElementById("text1").value;
var x2 = document.getElementById("text2").value;
The reason is because you are never getting values from text field.
Check below:
function sum() {
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1">
<br>
<input type="text" placeholder="tap second number" id="text2">
<br>
<input type="button" value="=" onclick="sum()">
<br>
<input type="text" placeholder="result" id="text3">
<br>
</fieldset>
</form>
Hope it helps you.
Thanks!
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>
Sorry, I'm newbie,
<html>
<head>
<script type="text/javascript">
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
var z = x + y;
alert(z);
</script>
</head>
<body>
<input type="number" id="x" />
<input type="number" id="y" />
</body>
</html>
If my input x = 100, and y input = 200.
My popup alert are 100200.
How to fixed this?
thank you.
It's because the value is a string, you need to convert it to a number and then do the addition.. This should do it..
<html>
<head>
<script type="text/javascript">
var x = parseInt(document.getElementById('x').value);
var y = parseInt(document.getElementById('y').value);
var z = x + y;
alert(z);
</script>
</head>
<body>
<input type="number" id="x" />
<input type="number" id="y" />
</body>
</html>
Function parseInt will convert the string to an integer number and then 100+200 will be 300.
Find the Fiddle here
Use
var z = parseInt(x) + parseInt(y);
You need to typecast variables using parseInt(var) since they are
strings.
<html>
<head>
<script type="text/javascript">
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
var z = parseInt(x) + pasreInt(y);
alert(z);
</script>
</head>
<body>
<input type="number" id="x" />
<input type="number" id="y" />
</body>
</html>
So all I want here to happen is that how can I put all the given output in the answer textbox.
UPDATE
<html>
<body>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.f1.n1.value);
var y = parseInt(document.f1.n2.value);
if(x>=y) {
document.write("Invalid");
}
while (x<y)
{
document.write(x)
x=x+1;
}
}
</script>
<form name=f1 onsubmit="return false">
First no. <input type="text" name="n1">
Second no. <input type="text" name="n2">
Answer: <input type="text" name="ans" disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Thank you in advance
You can do something like this:
Give answer input an id:
<input id="answerTextBox" type="text" name="ans" disabled>
After while loop populate answer textbox:
while (x>y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
This will put x and y in your answer textbox.
UPDATE******
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
if(x >= y)
{
document.getElementById("answerTextBox").value = "Invalid Input";
}
while (x < y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
}
</script>
First no. <input type="text" name="n1" id="n1">
Second no. <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" onClick="myFunction()">
</form>
</body>
</html>
UPDATE for exponential************************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = x;
var answer = 1;
for(var i = 0; i < y; i++)
{
answer = answer * x;
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Number: <input type="text" name="n1" id="n1">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
UPDATE Add Exponents*****************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
var answer = 0;
for(var i = 0; i <= y; i++)
{
answer = answer + Math.pow(x, i);
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Base Number: <input type="text" name="n1" id="n1">
Enter Highest Exponent: <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
<html>
<body>
The number inserted in the textbox is the number of exponent it will generate. The sample is 3. 3X3X3 is 27. <br>
<script type="text/javascript">
function myFunction() {
var x = document.f1.n1.value;
while(x<27)
{
x=x*3;
}
document.write(x)
}
</script>
<form name="f1" onsubmit="return false">
First no. <input type="text"name="n1" value=3 disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Update: The Exponent in any number.