So I am doing a really basic thing. I wrote up this code. I was not able to get the result out of it. I am not sure what I am doing wrong. Because I am learning.
<head>
<script language="javascript" type="text/javascript">
function add(){
var input1=a;
var input2=b;
var result = a+b;
input1 = parseInt(document.getElementById("t1").value);
input2 = parseInt(document.getElementById("t2").value);
document.write("result");
}
</script>
<title>java</title>
</head>
<body>
<form name="f1">
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="function add();">
<input type="button" id="divide" value="divide" onClick="javascript:function divide();">
<input type="button" id="subtract" value="subtract" onClick="javascript:function subtract();">
<input type="button" id="multiply" value="multiply" onClick="javascript:function multiply();">
</p>
</form>
</body>
</html>
But it doesn't generate the the result.
The result wasn't actually being written, you were writing the string "result".
var input1=parseInt(document.getElementById("t1").value);
var input2=parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);
Modify your function as:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);
}
Hope This helps
Try this:
<head>
<script language="javascript" type="text/javascript">
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 +input2;
document.write(result);
}
</script>
<title>java</title>
</head>
<body>
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="add();">
<input type="button" id="divide" value="divide" onClick="divide();">
<input type="button" id="subtract" value="subtract" onClick="subtract();">
<input type="button" id="multiply" value="multiply" onClick="multiply();">
</p>
</body>
</html>
you can check this on http://htmledit.squarefree.com/
<script language="javascript" type="text/javascript">
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 +input2 ;
document.write(result);
}
</script>
Related
I am having trouble, as you can see in code, for the result3 as id i have op1, what I would like to have there so that it works is that id changes depending on the button pressed, how can I do that? because now every button is like a +.
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<script>
function getResult()
{
var result1 = document.getElementById("number1").value;
var result3 = document.getElementById ("op1").value;
var result2 = document.getElementById("number2").value;
calculate (result1,result3,result2);
}
function calculate(num1,operator,num2)
{
if (operator== '+')
{
var res1 = parseFloat(num1)+parseFloat(num2);
alert(res1);
}
else if (operator== '-')
{
var res2 = parseFloat(num1)-parseFloat(num2);
alert(res2);
}
else if (operator== '*')
{
var res3 = parseFloat(num1)*parseFloat(num2);
alert(res3);
}
else if (operator== '/')
{
var res4 = parseFloat(num1)/parseFloat(num2);
alert(res4);
}
else
{
alert("Nothing from above!");
}
}
</script>
<body>
<form action="get" method="#">
<input type="text" name="text1" value="" id="number1" /> <br/>
<input type="text" name="text2" value="" id="number2" /> <br/>
<input type="button" name="o1" value="+" id="op1" onclick="getResult();"/>
<input type="button" name="o2" value="-" id="op2" onclick="getResult();"/>
<input type="button" name="o3" value="*" id="op3" onclick="getResult();"/>
<input type="button" name="o4" value="/" id="op4" onclick="getResult();"/>
<input type="button" name="calc" value="Calculate" onclick="getResult();"/>
</form>
</body>
</html>
You are always calling the value of input with id="op1", which is + in your case. Why not pass the value?
getResult(id) {
var result1 = document.getElementById("number1").value;
var result3 = document.getElementById (id).value;
var result2 = document.getElementById("number2").value;
calculate (result1,result3,result2);}
The id is passed when calling the function:
<input type="button" name="o1" value="+" id="op1" onclick="getResult(id);"/>
<input type="button" name="o2" value="-" id="op2" onclick="getResult(id);"/>
<input type="button" name="o3" value="*" id="op3" onclick="getResult(id);"/>
<input type="button" name="o4" value="/" id="op4" onclick="getResult(id);"/>
Calculate button won't work this way, but this is a quick fix with your setup. Good luck.
function addData (n1, n2) {
alert(fn+ln);
}
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(n1.value,n2.value)">click</button>
</body>
its give me the following error:
ReferenceError: n1 is not defined.
You cannot get the value of the input by using n1.value You need to obtain the DOM element using document.getElementById and use its value to obtain the string value and parse it as Integer before you add them.
See this:
function addData (n1, n2) {
n1Val = parseInt(n1.value);
n2Val = parseInt(n2.value);
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
If you want to merely concatenate the data and not add it, just remove the parseInt call and add the strings like in the following example:
function addData (n1, n2) {
n1Val = n1.value;
n2Val = n2.value;
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
Hope it helps!!
Do like this way:
function addData (e) {
var rec = 0;
var t = document.getElementsByTagName('input');
for(var i=0;i<t.length;i++){
rec=rec+parseInt(t[i].value);
}
console.log(rec);
}
<script>
</script>
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(this)">click</button>
</body>
<html>
<head>
<title>Input tutorial</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
var final = val1 + val2;
alert(final);
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1" /> value2 = <input type="text" id="value2" name="value2" value="2" />
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()" />
</body>
</html>
I need to create two input text boxes that when the UpperCase button is clicked the input text is returned all in caps and when the LowerCase button is clicked the input text is returned in lower case. So for example:
Text: SuNsHiNe ToDaY
(upper case button)= SUNSHINE TODAY
(lower case button)= sunshine today
I have pasted the html code below and need help creating the JS code:
<!doctype html>
<html>
<head>
<script src='../p3-case.js'></script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase"/>
<input type="button" id="btn2" value="lowerCase"/>
</form>
</body>
</html>
I think you not need to use any external js just using Jquery
You need to use toLowerCase() and toUpperCase()
$("#btn1").click(function(){
var input = $("#input1");
input.val(input.val().toUpperCase());
});
$("#btn2").click(function(){
var input = $("#input1");
input.val(input.val().toLowerCase());
});
Here is sample of jsbin JSBIN
Here you go:
<!doctype html>
<html>
<head>
<script>
function upper()
{
var uc = document.getElementById('input1').value;
document.getElementById('input1').value = uc.toUpperCase();
}
function lower()
{
var lc = document.getElementById('input1').value;
document.getElementById('input1').value = lc.toLowerCase();
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase" onclick="upper();">
<input type="button" id="btn2" value="lowerCase" onclick="lower();">
</form>
</body>
</html>
writing from my tablet but i try my best! :)
Pure JavaScript:
Add onclick event to the button:
<input type="button" onclick="toupp()" id="btn1" value="upperCase";">
Then the functions
<script>
var toupp = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.value.toUpperCase();
}
and the other function:
var tolow = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.toLowerCase();
}
</script>
This code works perfectly for me
<!doctype html>
<html>
<head>
<script >
function toUpper(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toUpperCase();
obj.value = res;
}
function toLower(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toLowerCase();
obj.value = res;
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" onClick='toUpper()' value="upperCase";">
<input type="button" id="btn2" onClick='toLower()' value="lowerCase">
</form>
</body>
</html>
Can anyone provide insight on removing a text field element that was just appended? I haven't been able to get other posted solutions to work with the code I'm using. Thanks in advance.
<html>
<head>
<script>
function append(num) {
var txt = document.getElementById("result").value;
txt = txt + num + " ";
document.getElementById("result").value = txt;
}
</script>
</head>
<body>
<form>
<input type="button" value="A" onclick="append(this.value)">
<input type="button" value="B" onclick="append(this.value)">
<input type="button" value="C" onclick="append(this.value)">
<br>
<br>
<input type="text" id="result" size="100">
<br>
<br>
<input type="button" value="Clear Last" onclick="?">
<input type="reset" value="Clear All">
</form>
</body>
</html>
Try this:
function append(num) {
if (append.prev) {
//do something
console.log(append.prev);
}
var txt = document.getElementById("result").value;
txt = txt + num + " ";
document.getElementById("result").value = txt;
append.prev = num;
}
Working Fiddle (check in console)
This is my script might be easier to explain if yas can see it, im tring to reset the array with a button
<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 to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="number.splice(0)" value="Reset" />
</form>
</body>
</html>
Yes. Call it from a function.
EDIT: splice has problems with IE. Use array.length = 0 instead
<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/>');
}
function myReset() {
//number.splice(0);
number.length = 0;
var x = document.getElementById("box");
x.innerHTML = "";
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="myReset()" value="Reset" />
</form>
</body>
Despite being ugly, onclick="number.splice(0)" works: http://jsfiddle.net/39KZ9/20/