<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = x+y;
document.write("Sum is"+z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
Hi Guys, I am a beginner with JavaScript and I'm facing this little problem. If I enter 5 and 5 the result is 55. But I want to sum up these values.
As #TonyDong said, uses parseInt to convert the string to int if desired input is integer.
To make your function works better, you need to validate the inputs first before sum.
Below is one example:
make the type of two inputs are 'number'
checkValidity() for the form or two inputs in function=sum. if validated, sum the values, if not, return error.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y)
{
if(document.getElementById("submit").checkValidity()) {
var z = parseInt(x)+parseInt(y);
document.write("Sum is "+z);
}
else {
document.write("Input value must be Int!");
}
}
</script>
</head>
<body>
<form id="submit">
<input id="t1" name="" type="number"/>
<input id="t2" name="" type="number"/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
You should covert x and y to integers first, like parseInt(x) and parseInt(y) while doing the summation.
Then, instead of document.write, you can use console.log.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = parseInt(x)+parseInt(y);
console.log("Sum is",z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
Related
I am getting back into javascript for a job I am going to start soon. for some reason i forgot how to do a simple calculator. I dont understand why my even onclick is null when it is a button. I am sure this is a very simple answer I just cant see it.
if(document.getElementById("add").onclick == true){
alert("hey");}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a">
<input type="text" name="b">
<input type="button" value="+" name="add">
</body>
</html>
To get you started I made minor changes to your code, go through the changes and understand the use of each change.
function sum(){
var a = document.getElementById("a");
var b = document.getElementById("b");
alert(Number(a.value) + Number(b.value));
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<input type="button" onClick="sum()" value="+" name="add">
</body>
</html>
I am absolutely new to javascript. I am trying to create my first html page and add some javascript on my html tags. I want to have two boxes where I can input any number and click on Show me! in order to get the result. I wrote the code below but is doesn't do anything:
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result") == a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Any help with where I am wrong?
Many thanks in advance!
You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).
document.getElementById("result").value = a+b;
I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var val1 = document.getElementById("a").value.trim();
var val2 = document.getElementById("b").value.trim();
var a = parseFloat(val1 == ""? 0 : val1);
var b = parseFloat(val2 == ""? 0 : val2);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Well, it seems you merely forgot a little thing.
When reading the values of the a and b text boxes, you correctly used .value after retrieving the elements to access their value, but when you tried to set the value of result text box, you instead just compared it to the value of a+b. The == operator is for comparison, not setting a value.
Just as well, you will need to set the .value of the result text box, instead of the text box itself.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
i just got the code below and i found that i need to do the parseInt() function..That means i need use this function to find a integer answer for my BMI answer.
<!DOCTYPE html>
<html>
<head>
<title>
Calculate your BMI
</title>
<script type=text/javascript>
function CalculateBmi(){
var weight= document.getElementsByName('weight')[0].value;
var height= document.getElementsByName('height')[0].value;
if(weight>0 && height>0){
var finalBMI=(weight/(height*height))*703;
document.getElementsByName('BMI')[0].value=finalBMI;
}
}
</script>
</head>
<body>
<form name="Form">
weight in pounds
<input type="text" name="weight" />
<br/>
height in inches
<input type="text" name="height"/>
<br/>
<input type="button" value="calculate BMI" onclick="CalculateBmi()">
<br />
BMI result
<input type="text" name="BMI"/>
</form>
</body>
</html>
The code above is what i did, i have try to put () in the co such as
document.getElementsByName('BMI')[0].value=ParseInt(finalBMI);
but i am sure i miss something.
var weight= parseInt(document.getElementsByName('weight')[0].value, 10);
var height= parseInt(document.getElementsByName('height')[0].value, 10);
Next time, please show us your attempts in the question!
I want the text to be printed without commas.
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=[];
var i,j=0;
for(i=a.length-1;i>=0;i--){
b[j]=a[i];
j++
}
//rev.res.value=b;
alert(b);
}
</script>
</body>
</html>
If I give the input as abc I am getting an output as c,b,a, but I want it as cba.
Try this:
alert( b.join("") )
You could also reverse a string more easily by:
"hello".split("").reverse().join("")
//"olleh"
You may reverse your string using javascript built-in functions:
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=a.split("").reverse().join("");
//rev.res.value=b;
alert(b);
}
</script>
</body>
</html>
You may also transfer join your array elements to become a string
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=[];
var i,j=0;
for(i=a.length-1;i>=0;i--){
b[j]=a[i];
j++
}
//rev.res.value=b;
alert(b.join(""));
}
</script>
</body>
</html>
You can also use document.getElementById().value.reverse().join("");
i want to write the value in textbox under it,how can i do it?thanks in advance
i wrote this codes:
<html>
<head>
<script language="javascript">
function show (text){
document.write("text");
}
</script>
</head>
<body>
<input type=textbox name=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick=show(textbox.value)/>
</body>
</html>
first of all: document.write replaces document content, use window.alert or such
next, consider enclosing fields in the <form> and then use show(this.form.textbox.value)
thats besides other scripting errors :)
Modify your html like this:
<input type=textbox name=textbox value="Insert Name" id="txt" />
<span id="spn"></span>
<input type=button name=button value="OK" onclick="show();" />
And JavaScript like this:
function show(){
document.getElementById('spn').innerHTML = document.getElementById('txt').value;
}
Something like this should work: Working example
<html>
<head>
<script language="javascript">
function show (text){
document.getElementById("text").innerHTML = text;
}
</script>
</head>
<body>
<input type=textbox name=textbox id=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick="show(document.getElementById('textbox').value)"/>
<div id="text"></div>
</body>
</html>