<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form id="window">
<input type="text" id="num1"><br />
<input type="text" id="num2"><br />
<input type="button" value="Calculate" onClick="main()"><br />
</form>
<script>
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
function main(){
alert(num1 + num2);
}
</script>
</body>
</html>
This is my code tell me what I am doing wrong because whenever I call the alert() it just returns 0 to the screen. I have tried it in different browsers but with no luck. Go easy on me because I have started only about a week ago!``
It's because you're setting the values of num1 and num2 once, right at the beginning of the script when the inputs don't have anything in them yet (Number("") is 0), not each time main is called. Just move those two lines into main so the values of the inputs as of the button click are used:
function main(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
alert(num1 + num2);
}
You need to get num1 and num2 inside main(); Use below code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form id="window">
<input type="text" id="num1"><br />
<input type="text" id="num2"><br />
<input type="button" value="Calculate" onClick="main()"><br />
</form>
<script>
function main(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
alert(num1 + num2);
}
</script>
</body>
</html>
Related
From input i enter numbers in the input text, then i have 5 buttons that have functions on them i tried to make the first button to minus the number by 1 but i don't know when i click the number get -1 but it doesn't show changes to the input box. How can i fix this i mean don't know how to do it because i tried using number.innerHTML = number-=1 but it doesn't work ? Here is my html and javascript code:
var number = document.getElementById("number");
number = number.value;
function minus() {
number.value = number -= 1;
console.log(number);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="number" id="output">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
</body>
</html>
Ok let's think logically here
var number = document.getElementById("number");
number = number.value;
function minus() {
number.value = number -= 1;
console.log(number);
}
first you're assigning the HTML ELEMENT itself to the var "number", then you're changing the value of the "number" var to the value of the HTML element, so then number.value = number - 1 is trying to set the property of "value" of a number object, which doesn't make sense, because it's not connected to the HTML element anymore
Just make two variables it should be fine, like
var number = document.getElementById("number");
var numberValue = number.value;
function minus() {
numberValue = number.value;
number.value = numberValue -= 1;
console.log(number,numberValue);
}
or alternatively, you only need one variable total, and you don't need to reassign it to "number.value", but the only thing is that this way there's no guarantee that number.value is a number at all, but when you set it to a variable first, like above, you can check if(!isNaN) or something similar, but still, if we want to assume only numbers will ever be entered, we can do something like
var number = document.getElementById("number");
function minus() {
number.value = number.value -= 1;
console.log(number,number.value);
}
Try this instead.
var number = document.getElementById("number");
function minus() {
number.value = number.value -= 1;
console.log(number);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="number" id="output">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
</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 have some Input fields on my page, these fields are already filled when I refresh the page.
How can I clear the pre-filled input fields without using reset button on page refresh?
function add() {
var num1, num2, c;
num1 = Number(document.getElementById("a").value);
num2 = Number(document.getElementById("b").value);
c = num2 + num1;
document.getElementById("answer").value = c;
}
<!doctype html>
<html>
<title>
addition WEBSITE
</title>
<body>
<div align="center">
<h1>addition</h1>
a= <input id="a"> b= <input id="b">
<button onclick="add()">Add</button> Sum= <input id="answer">
</div>
</body>
</html>
You can clear the fields on window.onload .
<!doctype html>
<html>
<title>
addition WEBSITE
</title>
<head>
</head>
<script >
window.onload = function(){
document.getElementById("a").innerHTML = "";
document.getElementById("b").innerHTML = "";
}
function add()
{
var num1,num2,c;
num1= Number(document.getElementById("a").value);
num2= Number(document.getElementById("b").value);
c=num2+num1;
document.getElementById("answer").value=c;
}
</script>
<body>
<div align="center">
<h1>
addition
</h1>
a= <input id="a">
b= <input id="b" >
<button onclick="add()">Add</button>
Sum= <input id="answer" >
</div>
</body>
</html>
Your code should be better.
Anyway, if you want the fields to be empty when refreshing the page, create an anonymous function called by itself like this:
function () {
document.getElementById('a').value = "";
}
Get the other input elements and do the same inside this function.
Happy coding !!
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>
This is my code. When I click the calculate button it is displaying just the number 35. WHere have I gone wrong and how can I fix it?
<!doctype html>
<html>
<head>
<title>JS Practise 2</title>
</head>
<body>
<h1> Problem 1.1 </h1>
<script language="javascript">
var topsoil_amount = 1;
function calculate() {
var topsoil_amount = document.getElementById(Input);
var topsoil_cost = 15;
var cost = (topsoil_amount * topsoil_cost) + 35;
alert(cost);
}
</script>
<br>
<input type="text" name="Input" size="16" id="Input">
<input type="button" value="Calculate" onClick="calculate()">
</body>
</html>
topsoil_amount is a DOM element, not a number. You need to reference the value. Secons issue is you need quotes around the id.
var topsoil_amount = document.getElementById("Input").value;