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>
Related
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>
<!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>
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>
I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">
Hi so yes this is a previous issue i have had, i have hit the books and whent back to basics adjusted a few things but im still having trouble getting the input value to push to the array can some one please help me get my head around this thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number=["1"]
function myFunction()
{
var x=document.getElementById("box");
number.push=document.getElementById("input").value;
x.innerHTML=number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
Here is the mistake:
number.push(document.getElementById("input").value);
push is a method, not an attribute ;-)
JSFiddle
PS: Why the ; after id="box"; ? You should fix that too..! ;-)
You were close, here's the working code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>