multiple function in javascript - javascript

i want to use multiple function in a script.i am not getting calculated value in second textbox. i dont know what is wrong in my program.
returning no value.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fun1()
{
var z=5;
function fun3(x)
{
alert("i am fun3");
var y=x+z;
}
return y;
}
function fun2()
{
var a = document.getElementById("txt1").value;
var result = fun3(a);
document.getElementById("txt2").innerHTML=result;
}
</script>
</head>
<body>
Enter no: <input type="text" value="" id="txt1" onkeydown="fun2();">
Result: <input type="text" value="" id="txt2" />
</body>
</html>

Are you looking for something like this ?
function fun1(a)
{
var z=5, y;
function fun3(x)
{
alert("i am fun3");
y=x+z;
}
fun3(a)
return y;
}
function fun2()
{
var a = document.getElementById("txt1").value;
var result = fun1(a);
document.getElementById("txt2").value=result;
}
EDIT :
I changed : document.getElementById("txt2").innerHtml=result; with document.getElementById("txt2").value=result; as txt2 is an input
If not, please precise your question, I'll edit it as soon as I've more details.
EDIT 2
#Nitish finished by found by himself : jsfiddle.net/nitishkaushik/4sxb9d55/4

this is what i want. and i got it. if anybody want then they can use :)
Enter no:
Result:
<script>
function fun1(a)
{
alert("Debugging 1st level="+a);
var z=5, y;
function fun3(x)
{
alert("Debugging 2nd level="+x);
y= (parseInt(x) + parseInt(z));
alert("Debugging 3rd level="+y);
}
fun3(a)
return y;
}
function fun2(val)
{ var result=0;
alert("value is"+val);
var result = fun1(val);
alert("Debugging 4th level="+result);
document.getElementById("txt2").value=result;
}
</script>

Related

Clearing textfield value

I'm trying to clear the textfield in html using javscript if the given condition is met. For ex:- if the user types awesome in textfield then it should reset the textfield (no blank space nothing).
<html>
<input type="text" id="real" onkeypress="blank()" placeholder="tempo"/><br>
<script>
function blank(){
if(document.getElementById('real').value=="awesome"){
real.value='';
}
}
</script>
</html>
Here real is undefined, so instead of
...
real.value = '';
...
do this
...
document.getElementById('real').value = '';
...
Use variable real to store input element and use onkeyup event:
function blank() {
var real = document.getElementById('real');
if (real.value == "awesome") {
real.value = '';
}
}
<input type="text" id="real" onkeyup="blank()" placeholder="tempo" />
<br>
Another good example would be:
document.addEventListener('DOMContentLoaded', function() {
var real = document.getElementById('real');
real.addEventListener('keyup', blank, false);
}, false)
function blank() {
if (this.value === "awesome") {
this.value = '';
}
}
<input type="text" id="real" placeholder="tempo" />
<br>
Change the line
real.value=''
to
document.getElementById('real').value = '';
You can't just say "real.value" because javascript doesn't know what "real" is.
<html>
<input type="text" id="real" onkeypress="blank()" placeholder="tempo"/><br>
<script>
function blank(){
var real = document.getElementById('real');
if(real.value=="awesome"){
real.value='';
}
}
</script>
</html>
You where facing issue with input event "onkeypress" if change the event and use "onkeyup"
issue will be resolved.
<html>
<script>
function blank() {
var real = document.getElementById('real');
if (real.value == "awesome") {
real.value = '';
}
}
</script>
<input type="text" id="real" onkeyup="blank()" placeholder="tempo"/><br>
</html>

Double tilde (~~) operator is removing decimal portion of number

So all this time I thought I was doing it wrong. But can jQuery read decimals? My first textbox has to multiply the input with .10, the second is .05. But I only get 1 as final result. How can I fix it?
<!DOCTYPE html>
<head>
<title>Test</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<head>
<body>
<input id="first" type="text" />
<script>
$('#first').on('change', function () {
$(this).val($(this).val() * .10);
compute();
});
</script>
<input id="second" type="text" />
<script>
$('#second').on('change', function () {
$(this).val($(this).val() * .05);
compute();
});
</script>
<script>
function compute() {
var first = ~~$('#first').val();
var second = ~~$('#second').val();
var result = $('#result');
var grade = first + second;
result.val(grade);
}
</script>
<input id="result" type="text" readonly />
</body>
</html>
I believe you want to change compute() to this:
function compute() {
var first = parseFloat($('#first').val());
var second = parseFloat($('#second').val());
var result = $('#result');
var grade = first + second;
result.val(grade);
}

how to use id of a button in if statement using javascript

I am a beginner to Javascript and am trying to perform arithmetic functions.
Here is my code below:
script
<script language="javascript" type="text/javascript">
function func(a,b)
{
var a = document.getElementById("a");
var b = document.getElementById("b");
if (document.getElementById("btnadd").Text == 'Add')
{
var c = a + b;
document.getElementById("rslt").innerHTML =c;
}
}
</script>
aspx
<asp:Button ID="btnadd" Text="Add" runat="server" OnClientClick="func(txtn1,txtn2)" />
<p id="rslt"></p>
My idea is, when I click say 'add' button the value of two textbox should be passed to the script and are assigned to two variables.
With those two variables all arithmetic (add,sub,div,mul) should be done.
What you could do is also pass the button that was clicked, using this. That way you know the text of the button that was clicked. And since you are using a server side button, be sure to include return false; from your JavaScript call to prevent it from posting back and clearing your <p> tag.
<asp:Button ID="btnadd" runat="server" Text="Add"
OnClientClick="func('txtn1', 'txtn2', this); return false;" />
function func(a, b, btn) {
var txtn1 = document.getElementById(a);
var txtn2 = document.getElementById(b);
var rslt = document.getElementById('rslt');
if(btn.value == 'Add')
rslt.innerHTML = parseInt(txtn1.value) + parseInt(txtn2.value);
}
According to here:
You have to use anonymous functions/handlers to react on such user-interactions without reloading the page. Also look at jquery (http://api.jquery.com/click/) which gives you a simpler api to write those things.
<script language="javascript" type="text/javascript">
function func(a,b) {
var a = document.getElementById("a");
var b = document.getElementById("b");
var btn = document.getElementsById("btnadd");
btn.onclick = function() {
var c = a + b;
// alert("Result = " + c );
document.getElementById("rslt").innerHTML =c;
}
}
</script>
Hope that your requirement is to perform arithmetic operations with two numbers from the text boxes.For that you need not pass text boxes as parameters to the script since it uses document.getElementById. directly access the textbox inside the script as follows:
<head><script>
function myFunction(a) {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x;
if(a==1)
x = +y + +z;
else if(a==2)
x=+y - +z;
else
x=0;
document.getElementById("demo").innerHTML = x;
}
</script></head>
<body>
<p>Click the button to calculate x.</p>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<button onclick="myFunction(1)">Addition</button>
<button onclick="myFunction(2)">Subtraction</button>
<p id="demo"></p>
</body>
The above code will perform addition and subtraction based on button click
function func(a,b) {
var a,b;
a=$("#a").val();
b=$("#b").val();
if ($("#btnAdd").val() == 'Add') {
$("#a").val(+(a) + +(b));
}
}
And Set button value to Add
Or if you want to reduce your code then use this code
if ($("#btnAdd").val() == 'Add') {
$("#a").val( +($("#a").val()) + +($("#b").val() ));
}

Uncaught ReferencEerror function is not defined, how to use typeof with an if else?

I am trying to get the initials (upper case letters) of the name that the user enters inside the text field. I get and error that my function getInitials() is not defined. Why do I get this error? Also I want to check if the function exists with typeof.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Second task HS</title>
</head>
<body>
<form name="myForm" id="eForm" action="#">
<label for="name">Name</label>
<input type="text" id="name" name="fullname"/><br>
<input name="button" type="button" value="Pick" onclick="getInitials();"/>
</form>
<div id="result">
</div>
<script type="javascript">
var nameInput = document.getElementById('name').value;//I need to stringify the input and use it!
var arr, nameArr, first, last;
nameArr = name.split(' ');
first = nameArr[0][0].toUpperCase();
last = nameArr[nameArr.length - 1][0].toUpperCase();
if(typeof getInitials == 'function'){
function getInitials(nameArr) {
return {first: first, last: last};
}
getInitials(nameInput);
}else{
alert('Check getInitials!');
}
</script>
</body>
</html>
From what I see, you are checking if the function exists... before creating it !
Try rather this JS code :
function getInitials( nameInput ) {
var nameArr = nameInput.split(' ');
return {
first: nameArr[0][0].toUpperCase(),
last: nameArr[nameArr.length - 1][0].toUpperCase()
};
}
function getInitialsFromInput() {
var nameInput = document.getElementById('name').value;
if(getInitials instanceof Function){ //strictly speaking, useless because it is obviously a function
alert(getInitials(nameInput));
}else{
alert('Check getInitials!');
}
}
getInitialsFromInput() ;
(and use "getInitialsFromInput()" for the onclick to gather the input's value)
You missed the text in <script type="javascript">, the statement should be like this <script type="text/javascript">
Here is the simple version of what you wanted, try it, this program expects first name Or first and last name only.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Second task HS</title>
<script type="text/javascript">
var arr, first, last;
function getInitials() {
var nameInput = document.getElementById('name').value; //I need to stringify
nameArr = nameInput.split(' ');
if(nameArr.length > 1){
first = nameArr[0].toUpperCase();
last = nameArr[1].toUpperCase();
}else{
first = nameInput.toUpperCase();
}
var result = {first: first, last: last};
alert(result.first);
alert(result.last);
}
</script>
</head>
<body>
<label for="name">Name</label>
<input type="text" id="name" name="fullname"/><br>
<input name="button" type="button" value="Pick" onclick="getInitials()"/>
<div id="result">
</div>
</body>
</html>
Your code makes no sense. getInitials Just is not assigned initially, so the inline click handler within the button will never work.
If you need the input value with first characters uppercased and initials, try something like:
document.querySelector('button[value=Pick]').onclick = getInitials;
function getInitials(e) {
var value = document.querySelector('#name')
.value.split(/\s+/)
.map( first2Upper );
if (value[0].length){
var ret = {first: value[0],
last: value[1],
initials: value[0][0] +(value[1] && value[1][0] || '')};
document.querySelector('#result').innerHTML =
value.join(' ') + ' (initials: '+ret.initials+')';
return ret;
} else {
alert('please enter a value');
}
}
function first2Upper(str) {
return str.slice(0,1).toUpperCase() + str.slice(1);
}
Here's a mockup in jsFiddle

Getting the value of prompt box into another function

Please check out the code below. I want to get the value entered in the prompt box into function dis(). How can I do that?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var z=prompt("enter your name...");
if(z!=null)
{
document.getElementById("demo").innerHTML="thankyou"+z+"..";
document.getElementById("case").style.display='block';
}
else
document.getElementById("demo").innerHTML="thankyou";
}
function dis()
{
var a=document.getElementById("aaa").value;
alert("your mark is"+a);
}
</script>
</head>
<body>
<p id="demo">click on the button.....</p>
<button type="button" onclick="display()">submit</button>
<div id="case" style="display:none">
<input type="text" id="aaa" name="myText" onDblClick="dis()">enter your mark
</div>
</body>
</html>
If you want to directly pass value to dis() function then change your script to
function display() {
var z = prompt("enter your name...");
if (z != null) {
document.getElementById("demo").innerHTML = "thankyou " + z + "..";
document.getElementById("case").style.display = 'block';
dis(z);
}
else
document.getElementById("demo").innerHTML = "thankyou";
}
function dis(arg) {
alert("your mark is" + arg);
}
If you want the value to be accessible from independent functions you'll need to store it in a global variable:
<script>
var userName = null;
function display() {
userName = prompt("enter your name...");
if (userName != null) {
document.getElementById("demo").innerHTML="thankyou "+userName +"..";
document.getElementById("case").style.display='block';
} else
document.getElementById("demo").innerHTML="thankyou";
}
function dis() {
var a=document.getElementById("aaa").value;
alert(userName + ", your mark is"+a);
}
</script>
Note that if the functions are completely independent they'll all need to test whether the variable has a value yet. In your case the dis() function is only called from a control that is made visible after a value has been set, but note that the user might click the button again and then cancel - in which case the name will be set back to null but the case element will still be visible.

Categories