Quick newbie question, i'm sure it is simple to you, but i cant get my head around to figure out why my code wont work. Checked online, seems that i'm doing everything fine, but still wont work... All i'm trying to do, is to make simple calc and display that in diff field. I have tryed external and internal JS.
Here's my code:
<script type="text/javascript">
function calculate(){
var a = document.calculate.first.value;
var b = document.calculate.second.value;
var c = parseInt(a) + parseInt(b);
document.calculate.result.value = c;
}
</script>
<body>
<form name="calculate">
<input type="text" name="first" size="5">
<input type="text" name="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" name="result" id="result" size="5">
</form>
</body>
Chrome says:
Uncaught TypeError: object is not a function (onclick)
Give a different name to the form and the onclick handler! Here is a test.
Here is the corrected code :
<html>
<head>
<script type="text/javascript">
function calculate(){
var a = document.getElementById('first').value;
var b = document.getElementById('second').value;
var c = parseInt(a) + parseInt(b);
document.getElementById('result').value = c;
}
</script>
</head>
<body>
<form name="calculateform">
<input type="text" id="first" size="5">
<input type="text" id="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" id="result" id="result" size="5">
</form>
</body>
</html>
Its probably because you are using the same name for the form as for your js function.
Working example:
<html>
<head>
<script type="text/javascript">
function calculate(){
alert(document.calculatex.first.value);
var a = document.calculatex.first.value;
var b = document.calculatex.first.value;
var c = parseInt(a) + parseInt(b);
document.calculatex.result.value= c;
}
</script>
</head>
<body>
<form name="calculatex">
<input type="text" name="first" size="5"/>
<input type="text" name="second" size="5"/>
<input type="button" value="calculate" onclick="calculate();"/>
<input type="text" name="result" id="result" size="5"/>
</form>
</body>
Have a look into JQuery library (convenient for getting/setting field values).
Related
here you can see my code im stuck with
trying to input 2 numbers by user in html
calling function then adding those 2 in js
then printing in html
html.
<html>
<head>
<meta charset="utf-8">
<title> JavaScript | Basics</title>
<script src="basics.js" charset="utf-8"></script>
</head>
<body>
<!-- <input type="number" name="a" value="0" id="a">
<input type="number" name="b" value="0" id="b">
<button type="button" onsubmit="window.alert(a+b)" name="button">j</button>
< Start JavaScript Here -->
<form onsubmit='sum(a,b)'>
<label for="a">Input number a</label>
<input type="number" name="a" value="0" id='a'>
<br>
<label for="a">Input number b</label>
<input type="number" name="b" value="0" id='b'>
<button type="submit" name="submit">Submit</button>
<output id="total"></output>
</form>
</body>
</html>
js
// 34343
// window.alert()
function sum(a, b) {
console.log('hello world');
var c;
c.value = parseInt(a) + parseInt(b);
console.log(c.value);
window.alert(c.value);
document.getElementById('total').innerHTML = 'The value of s ' + c.value;
}
// </script>
help please
If you only want to sum the two values there is no need to use Form tag.
The Form tag is usually used to send data to a server for processing.
You can read more about Form tag here https://www.w3schools.com/html/html_forms.asp
Using plain JS your code would be something like this:
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript | Basics</title>
<script src="basics.js" charset="utf-8"></script>
</head>
<body>
<div> <!-- Remove Form-->
<label for="a">Input number a</label>
<input type="number" name="a" value="0" id="a" />
<br />
<label for="a">Input number b</label>
<input type="number" name="b" value="0" id="b" />
<button onclick="sum()" name="submit">Submit</button> <!-- on click calls sum function-->
<output id="total"></output>
</div>
</body>
<script>
function sum() {
let a = document.getElementById('a').value; // get value from 'a' input
let b = document.getElementById('b').value; // get value from 'b' input
console.log('hello world');
let c = parseInt(a) + parseInt(b); // sum value into 'c' variable
document.getElementById('total').innerHTML = 'The value of s ' + c; // adding innerHtml with value of 'c'
}
</script>
</html>
What I am trying to do is create a basic multiplier using google scripts. Two variables are gotten from an html form, they should then be multiplied in the calculate function in the code.gs and the answer should be returned.
I expect the screen to clear and the one sentence to display saying: "Function completed successfully, answer =" + ans.
ans being the product of the two input variables.
I get the following displayed:
Function completed successfully, answer =NaN
With the following error when inspecting the console in the browser(Chrome):
Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
at s.<anonymous> (onloadwff.js:71)
at l (onloadwff.js:71)
at Object.next (onloadwff.js:71)
at n (onloadwff.js:71)
I get the same error if I try to call the function anywhere in the html using :
google.script.run.calculate();
My code:
index.hml
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm">
<input type="text" id="A" value="2"> X
<input type="text" id="B" value="5">
<input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> =
</form>
<div id="total" ></div>
</body>
<script>
function answer(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('total').innerHTML = status;
}
</script>
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function calculate(form){
var num1 = parseInt(form.A);
var num2 = parseInt(form.B);
var ans = num1 + num2;
return "Function completed successfully, answer =" + ans;
}
You have this:
<form id="myForm">
<input type="text" id="A" value="2"> X
<input type="text" id="B" value="5">
<input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> =
</form>
Modifiy to this:
<form id="myForm">
<input type="text" name="A" value="2"> X
<input type="text" name="B" value="5">
<input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> =
</form>
Cant get my function to work and add the value of the button to the text field when clicked by user.
HTML
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"></textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
JavaScript
<script language="javascript" type="text/javascript">
function addToField(crd){
document.testing.field.value += crd;
}
</script>
Really stuck trying to understand whats wrong here.
Hope this shows what I am trying to achieve: https://jsfiddle.net/034hyjo2/6/
You're accessing the object incorrectly
<script language="javascript" type="text/javascript">
function addToField(crd){
document.getElementByName("testing").value += crd;
}
</script>
Or, give the element an ID and use getElementByID("testing").value.
I usually find that works better anyway...
If you're just getting it in the fiddle, it works by putting the script tag above your HTML:
<script>
var addToField = function(c) {
document.testing.field.value += c;
};
</script>
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"> </textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
</form>
Your JSFiddle is way wrong. You're question here is better. You want to be using document.getElementById('field').value += crd; instead of document.testing.field.value += crd;
try this:
<form name="testing" action="test.php" method="get">Chords:
<textarea id="field" name="field"> </textarea> ---note the addition of the ID parameter
<input type="button" value="G" onClick="AddToField('G');">
<input type="button" value="C" onClick="AddToField('C');">
<input type="button" value="Am" onClick="AddToField('Am');">
<input type="button" value="F" onClick="AddToField('F');">
</form>
<script>
function AddToField(c) {
document.getElementById('field').value += c;
};
</script>
Also functions shouldn't be camelCase but Pascal case ;)
I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function add(){
var num1 = parseInt(document.calc.num1.value);
var num2 = parseInt(document.calc.num2.value);
var answer = (num1+num2);
document.getElementById('res').value = answer;
}
</script>
</HEAD>
<BODY>
<FORM NAME="calc">
<INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
<hr/>
<INPUT TYPE ="text" NAME="num1" Value="">
<INPUT TYPE ="text" NAME="num2" Value="">
<hr/>
<INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
And I am getting the following error when I press the + button.
Uncaught TypeError: object is not a function
Try changing the function name from add to addNumbers or something like that.
onclick is the right attribute to handle click
onClick="add()"
Switch this bit to
onclick="add()"
The problem is the name of the function "add()", change the name and you will see that it will works!
HTML
<p>
<label for="field1">Field 1</label>
<input type="number" id="field1"/>
</p>
<p>
<label for="field2">Field 2</label>
<input type="number" id="field2"/>
</p>
<p>
<label for="total">Total</label>
<input readonly type="number" id="total"/>
</p>
<p>
<input type="button" id="calc" value="Calculate"/>
</p>
Javascript
Goes in a script tag in head.
function sumFields(fields) {
var total = 0;
// goes through each field and adds them to the total
for(var i=0,l=fields.length; i<l; i++)
{ total += parseInt(document.getElementById(fields[i]).value); }
document.getElementById('total').value = total;
}
function calc_click() {
// runs when the button is clicked
sumFields(['field1','field2']);
}
// main function
function init() {
// add button functionality
document.getElementById('calc').addEventListener('click',calc_click,false);
}
// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);
I have a simple HTML form, with 3 input field, when you hit = button, it suppose to add 2 numbers that you typed in the first 2 input fields and display result in 3rd filed. Is it possible to do that? (I need result in a box (or table) or some thing rather than in plain text). I try the following but doesn't work (it does nothing), can somebody help me?
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""> +
<INPUT TYPE="text" NAME="number2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()">
<INPUT TYPE="text" ID="add" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
innerHTML sets the text (including html elements) inside an element. Normally we use it for elements like div, span etc to insert other html elements inside it.
For your case you want to set the value of an input element. So you should use the value attribute.
Change innerHTML to value
document.getElementById('add').value = sum;
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
This should work properly.
1. use .value instead of "innerHTML" when setting the 3rd field (input field)
2. Close the input tags
Do you really want the result to come up in an input box? If not, consider a table with borders set to other than transparent and use
document.getElementById('sum').innerHTML = sum;
With .value and INPUT tag
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
with innerHTML and DIV
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<DIV ID="add"></DIV>
</FORM>
</BODY>
</HTML>