I am newbie to Javascript... and I am unable to get from input to js variable, I referred to the questions asked here before still I unable to get the information. My code is as follows:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS </title>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc()">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
</script>
</body>
</html>
Typo in H1 TotalAmout should be TotalAmount
Calc should be defined before calling it. Fiddle
<head>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
</head>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="javascript:calc()">Submit</button>
</form>
<h1 id="TotalAmount"></h1>
</body>
You have a typo in your H1's ID. It should probably match the TotalAmount in your javascript.
Two things:
typo in "TotalAmout" and "TotalAmount"
function needs to be defined prior to calling it
see here: https://jsfiddle.net/zLguL6fu/:
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc(); return false;">Submit</button>
</form>
<h1 id="TotalAmount"></h1>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
please use this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS </title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc()">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = $("#amount").val();
$("#TotalAmout").html(amt);
}
</script>
</body>
</html>
and you also required add jquery js in head
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc();return false">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = $("#amount").val();
$("TotalAmount").html(amt);
}
</script>
Related
As below you can see I want perform calculation of adding and subtracting but the program not giving output of calculation. there is input box for operator 1 and operator 2. I create two function add and sub. And using document.getElementById I pass the value of a and b and want to calculate but the function is does not giving output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Operator1:<input type="text" id="a">
<br><br>
Operator2:<input type="text" id="b">
<br><br>
<input type="button" value="Add" id="add" onclick="addd()">
<input type="button" value="sub" id="sub" onclick="subb()">
<br><br>
Result: <input type="text" id="res">
<script>
function addd(){
var ra= document.getElementById('a').value;
var rb=document.getElementById('b').value;
var rab=ra+rb;
Document.getElementById('res').value==rab;
}
function subb(){
var ra= document.getElementById('a').value;
var rb=document.getElementById('b').value;
var rab=ra-rb;
document.getElementById('res').value==rab;
}
</script>
</body>
</html>
You want to make sure you're using the assignment operator, instead of the comparison operator.
Try document.getElementById('res').value = rab; instead.
I'll provide an example that you'll hopefully learn from, but I really recommend you go and learn the basics before you continue programming.
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
The only thing that's not self-explanatory here is the actual calculation. Notice how I put a + at the start of each value +inputAElement.value? That's to cast the value to a number for the calculation. Otherwise in certain situations, the value could be treated as a text value and just mashed together (e.g. 5 + 1 = 51).
Use CSS styles to change the look, as shown in the style tag. Abusing won't make you any friends.
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
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>
Why won't the code display the text from the textbook in the paragraph tag? I tried to take the code from the text box by using the onclick command and the function getVal() but it won't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="test.js">
function getVal1(){
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML=text
}
</script>
</head>
<body>
<form>
<input type="text" id="text">
<input type="submit" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
It cant work because you submit (which includes a reload) of the page.
Take a input type="button"instead.
function getVal1() {
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML = text
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type="text" id="text">
<input type="button" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
<!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>
Hi I want to get the innerHTML of a div that contains input elements with input values.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" />
</div>
<p id="pid">
un texte.<input type="text" id="in" />
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
I want to get the inserted text in the inputs elements.
A piece of code can do the magic.
onblur='javascript:this.setAttribute("value",this.value)' value=""
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' />
</div>
<p id="pid">
un texte.<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' value=""/>
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
function afficher()
{
var t=document.getElementById('test').querySelectorAll("input");
console.log(t[0].value);
var t=document.getElementById('pid').querySelectorAll("input");
console.log(t[0].value);
}
<div id="test">
<input type="text"/>
</div>
<p id="pid">
un texte.<input type="text" />
</p>
<input type="submit" id="in" onclick="afficher();" />
Get div/p element using getElementById then use querySelectorAll to get input element. To get the value use input.value