Need some help with Javascript

Question

deleti0n 0 Newbie Poster

15 Years Ago

Okay this is what I am having trouble with Button "d" i want it to run in a sequence of button A, b, then c. then b, c, then a. and soforth. I've been working at it for a week now. I have button a b and c working just fine

//begin code here...
//check to see if there is a value in the input field, & to see if that value is numeric only.

//When button A is clicked it should add 1 to the numeric value in input field
//z=x+1 (z++)
function increment(txtBox) {
	document.getElementById('txtBox').value = parseFloat(document.getElementById('txtBox').value) + 1; 
		document.aform1.txtBox.focus();
}
//When button B is clicked it should divide by 2 to the numeric value in the input field
function divideThem(txtBox){
	txtBox.value = parseFloat(txtBox.value) / 2;
}
//When button C is clicked it should subtract by 1 to the numeric value in the input field
//z=x-1 (z--) 
function decrement(txtBox) {
	document.getElementById('txtBox').value = parseFloat(document.getElementById('txtBox').value) - 1; 
		document.aform1.txtBox.focus();
}
//When button D is clicked it should go through the sequence of A, B then C.

/*function runSequence(txtBox) {

document.aform1.txtBox.value
PreviousDisplayValue = document.aform1.txtBox.value

if(txtBox =="+ 1") {
document.aform1.txtBox.value = parseFloat(PreviousDisplayValue + CurentDisplayValue)
}
else if(txtBox == "/ 2") {
document.aform1.txtBox.value = parsFloat(PreviousDisplayValue / CurentDisplayValue)
}
else if(txtBox == "- 1") {
document.aform1.txtBox.value = parFloat(PreviousDisplayValue - CurentDisplayValue)
}
document.aform1.txtBox.focus();
}*/

/*function runSequence (txtBox) {
	if document.getElementById('txtBox').vaule = + 1
	}else{txtBox.value = parseFloat(txtBox.value) / 2;
		
}*/

and here is the HTML

<body>
<form name="aform1" id="aform1">
  <input type="text" name="txtBox" id="txtBox" value="0" size="4" maxlength="4"/>
<input type="button" value="A" onClick="increment(txtBox);" />
<input type="button" value="B" onClick="divideThem(txtBox);" />
<input type="button" value="C" onclick="decrement(txtBox);" />
<input type="button" value="D" onclick="runSequence(txtBox);" />
</form> 
</body>

I got really frustrated and couldn't finish the coding on the sequence...

javascript

3 Contributors
5 Replies
155 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Airshow 416 WiFi Lounge Lizard

15 Years Ago

deleti0n
First, by passing a second parameter to your functions, you make them more flexible, and you can get rid of "decrement" because it is just "increment" with a negative value.

Then, there's a number of ways to do the sequence. There are three below, in increasing order of complexity (and flexibility).

function increment(fieldId, val) {
	var f = document.getElementById(fieldId);
	f.value = f.value - 0 + val;
	f.focus();
}
function divide(fieldId, denom){
	var f = document.getElementById(fieldId);
	f.value = f.value / denom;
	f.focus();
}
function runSequence_1(form, fieldId, seqArray){
	increment('txtBox', 1);
	divide('txtBox', 2);
	increment('txtBox', -1);
}
function runSequence_2(form, fieldId, seqArray){
	form.bA.onclick();
	form.bB.onclick();
	form.bC.onclick();
}
function runSequence_3(fieldId, seqArray){
	for(var i=0; i<seqArray.length; i++){
		window[seqArray[i][0]](fieldId, seqArray[i][1]);
	}
}

<form name="aform1" id="aform1">
	<input type="text" name="txtBox" id="txtBox" value="0" size="4" maxlength="4" />
	<input type="button" name="bA" value="A" onClick="increment('txtBox', 1);" />
	<input type="button" name="bB" value="B" onClick="divide('txtBox', 2);" />
	<input type="button" name="bC" value="C" onclick="increment('txtBox', -1);" />
	<input type="button" name="bD" value="D" onclick="runSequence_1(this.form, 'txtBox');" />
	<input type="button" name="bE" value="E" onclick="runSequence_2(this.form, 'txtBox');" />
	<input type="button" name="bF" value="F" onclick="runSequence_3('txtBox', [['increment',1], ['divide',2], ['increment',-1]]);" />
</form>

If you are new to javascript, then runSequence_3 may well be a complete mystery. It loops through seqArray , which is an array of arrays. window[seqArray[i][0]] is the function to be called, and seqArray[i][1] is the value to be applied. You can see how seqArray is constructed in the HTML.

Have fun.

Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

deleti0n,

Browser/version? Symptoms? What works and what doesn't? Have you installed the script and HTML properly? What have you done to debug?

It works fine in IE6, IE7, Firefox 3.0.13, Opera 9.01.
Chrome (bless it) does its best but struggles with the precision of the result.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

deleti0n 0 Newbie Poster · Answer 1 · 2009-08-05T14:28:13+00:00

deleti0n 0 Newbie Poster

15 Years Ago

I ran the script and it didn't work.

deleti0n 0 Newbie Poster · Answer 2 · 2009-08-05T19:13:59+00:00

yes I installed the html and script tags properly tried to run it in firefox (latest downloadable version) and in IE7. Neither one had any effect. I will be running a debug today after i get off work...I will keep you posted

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-08-06T16:03:47+00:00

Hi,

You could also try this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
<style id="css21" type="text/css">
/* <![CDATA[ */

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var element = ( function( xid ) {
   var xid;
   if ( typeof( xid ) === "object" ) {
      xid = xid || 0;
   } else {
      xid = (( xid = document.getElementById( xid )) ? xid : xid ) || 0;
   } return xid;
} ); 
var increment = ( function( txtBox ) {
   txtBox = element( txtBox )
   if ( txtBox ) {     
     txtBox.value =  ((( txtBox.value.replace( /[a-zA-Z\D]+/g, "" )) * 1 ) + 1 );
     txtBox.focus();
   element( "saved" ).value = "+ 1";
   }
} );
var divideThem = ( function( txtBox ) {
   txtBox = element( txtBox );
   txtBox.value =  ((( txtBox.value.replace( /[a-zA-Z\D]+/g, "" )) * 1 ) / 2 );
   txtBox.focus();
   element( "saved" ).value = "/ 2";
} );
var decrement = ( function( txtBox ) {
   txtBox = element( txtBox );
   txtBox.value =  ((( txtBox.value.replace( /[a-zA-Z\D]+/g, "" )) * 1 ) - 1 );
   txtBox.focus();
   element( "saved" ).value = "- 1";
} );
var runSequence = ( function( txtBox ) {
   txtBox = element( txtBox );
   var num = (( txtBox.value.replace( /[a-zA-Z\D]+/g, "" )) * 1 );
   a = PreviousDisplayValue = num;
   b = CurrentDisplayValue = num;  
   txtBox.value = txtBox.value;
   var seq = element( "saved" ).value;
   var answer = { "+ 1" : ( a + b ), "/ 2" : ( a / b ), "- 1" : ( a - b ) };
   if ( txtBox.value = answer[ seq ] )
      txtBox.focus()
   else
      return false;
} );
// ]]>
</script>
</head>
<body id="xhtml11">
<div id="main">
<form id="aform" action="#" onsubmit="return false;">
<div>
<input type="hidden" id="saved" name="saved" value="0" />
<input type="text" id="txtbox" name="txtbox" value="0" size="4" maxlength="4" /><br />
<input type="button" value="A" onclick="increment( txtbox );" /><br />
<input type="button" value="B" onclick="divideThem( txtbox );" /><br />
<input type="button" value="C" onclick="decrement( txtbox );" /><br />
<input type="button" value="D" onclick="runSequence( txtbox );" /><br />
</div>
</form>
</div>
</body>
</html>