Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't Clear Textfield?

    Hello, I am fairly new to javascript and am having trouble clearing a text field. I am making a "vending machine simulator" as an exercise. I have a button that is the coin return, and should clear the balance display. e.g the machine shows a balance of $2 inserted, the coin return button should clear it to 0.

    I believe I have done everything correctly but get NaN as the output (a text field named "box1"). I believe it has something to do with how the field is validated. It has number precision set to 2, which I would think would just become 0.00 or something. Anyways, here is my code:

    HTML:

    Code:
    <input class="money" id="coinreturn" type="button" value="return" onClick="coinReturn()" />
    <input name="box1" id="box1" onkeypress="return numbersonly(this, event)" maxlength="4" type="text"/>
    JavaScript for the coinReturn function:


    Code:
    function coinReturn()
    {
    	document.getElementById('box1').value = 0;
    }
    JavaScript for the "numbers only" validation:

    Code:
    function numbersonly(myfield, e, dec)
    {
    	var key;
    	var keychar;
    
    	if (window.event)
    	{
    	   key = window.event.keyCode;
    	}
    	else if (e)
    	{
    	   key = e.which;
    	}
    	else
    	{
    	   return true;
    	}
    
    	keychar = String.fromCharCode(key);
    
    	// control keys
    	if ((key==null) || (key==0) || (key==8) || 
    		(key==9) || (key==13) || (key==27) )
    	{
    	   return true;
    	}
    	// numbers
    	else if ((("0123456789.").indexOf(keychar) > -1))
    	{
    	   return true;
    	}
    
    }
    Last edited by jake_merringer; 07-19-2011 at 07:22 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    In your code...
    Code:
    function coinReturn()
    {
    	document.getElementById('box1').value = field.defaultValue;
    }
    Where is field.defaultValue; coming from?

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whoops. That was supposed to be

    Code:
    document.getElementById('box1').value = 0;
    I also tried:

    document.getElementById('box1').value = "";

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Works fine for me. What seems to be the problem?

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mine shows NaN in the textfield it outputs to. Maybe its another piece of the script then?

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by jake_merringer View Post
    Mine shows NaN in the textfield it outputs to. Maybe its another piece of the script then?
    What is the sequence of entries and button click you use?

    Is what you posted in #1 the whole script you are using?


  • #7
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No that isn't all my code. Here is my HTML form and the complete javascript:

    Code:
    <form name="machine">
    			<div class="grey" style="position:relative;top:-20px;">
    			<h2>Money Input:</h2>
    			$ <input name="box1" id="box1" onkeypress="return numbersonly(this, event)" maxlength="4" type="text"/>
    			</div>
    			<div class="white">
    				<input class="money" id="dollar" type="button" value="$ 1.00" />
    				<input class="money" id="quarter" type="button" value="$ .25" />
    				<input class="money" id="dime" type="button" value="$ .10" />
    				<input class="money" id="nickel" type="button" value="$ .05" />
    				<input class="money" id="coinreturn" type="button" value="return" onClick="coinReturn()" />
    			</div>
    			<div class="grey">
    			<h2>Drinks:</h2>
    				<div class="price"><p class="vertical">$2.00</p></div>
    				<input class="drink" id="redbull" type="button" value="Red Bull" />
    				<input class="drink" id="monster" type="button" value="Monster" />
    				<input class="drink" id="rockstar" type="button" value="Rockstar" />
    			<br />
    				<div class="price"><p class="vertical">$ .75</p></div>
    				<input class="drink" id="drpepper" type="button" value="Dr. Pepper" />
    				<input class="drink" id="mtndew" type="button" value="Mtn. Dew" />
    				<input class="drink" id="pepsi" type="button" value="Pepsi" />
    			</div>
    			<div class="white">
    				<div class="left">
    					<h2>Your Change:</h2>
    					$ <input name="box2" id="box2" type="text" value=""/>
    				</div>
    				<div class="left">
    					<h2>Your Product:</h2>
    					<input name="box3" id="box3" type="text" value=""/>
    				</div>
    			</div>
    			<br />
    			<br />
    			<p id="thanks" align="center">
    			</p>
    		</form>
    Code:
    /////////////////////////////
    function numbersonly(myfield, e, dec)
    {
    	var key;
    	var keychar;
    
    	if (window.event)
    	{
    	   key = window.event.keyCode;
    	}
    	else if (e)
    	{
    	   key = e.which;
    	}
    	else
    	{
    	   return true;
    	}
    
    	keychar = String.fromCharCode(key);
    
    	// control keys
    	if ((key==null) || (key==0) || (key==8) || 
    		(key==9) || (key==13) || (key==27) )
    	{
    	   return true;
    	}
    	// numbers
    	else if ((("0123456789.").indexOf(keychar) > -1))
    	{
    	   return true;
    	}
    
    }
    
    /////////////////////////////
    $(function()
    {
    
    	var money = [
    	{
    		name: "Dollar",
    		amount: 1.00		
    	},
    	{
    		name: "Quarter",
    		amount: 0.25		
    	},
    	{
    		name: "Dime",
    		amount: 0.10
    	},
    	{
    		name: "Nickel",
    		amount: 0.05			
    	}
    	]
    	
    	var dollar = money[0];
    	var quarter = money[1];
    	var dime = money[2];
    	var nickel = money[3];
    
    	$('#dollar').data(dollar);
    	$('#quarter').data(quarter);
    	$('#dime').data(dime);
    	$('#nickel').data(nickel);
    
    });
    
    /////////////////////////////
    function coinReturn()
    {
    	document.getElementById('box1').value = field.defaultValue;
    }
    /////////////////////////////
    $(function()
    {
    	$('.money').bind('click', addMoney);
    });
    
    /////////////////////////////
    function addMoney()
    {
    
    	var id = this.id;
    	var money = $('#' + id).data();
    	var added = money.amount*1;
    	var insertedMoney = document.getElementById('box1').value*1;
    	var sum = insertedMoney + added;
    	
    	if(insertedMoney < 5)
    	{
    		document.getElementById('box1').value = sum.toFixed(2);
    	}
    	else
    	{
    		alert("This machine will only accept up to $5.00 at a time.");
    	}
    }
    
    /////////////////////////////
    $(function()
    {
    	$('.drink').bind('click', purchase);
    });
    
    /////////////////////////////
    $(function()
    {
    	
    	var drinks = [
    	{
    		name: "Red Bull",
    		price: 2.00			
    	},
    	{
    		name: "Monster",
    		price: 2.00			
    	},
    	{
    		name: "Rockstar",
    		price: 2.00		
    	},
    	{
    		name: "Mtn. Dew",
    		price: .75			
    	},
    	{
    		name: "Pepsi",
    		price: .75			
    	},
    	{
    		name: "Dr.Pepper",
    		price: .75				
    	}
    	]
    	
    	var redbull = drinks[0];
    	var monster = drinks[1];
    	var rockstar = drinks[2];
    	var mtndew = drinks[3];
    	var pepsi = drinks[4];
    	var drpepper = drinks[5];
    	
    	$('#redbull').data(redbull);
    	$('#monster').data(monster);
    	$('#rockstar').data(rockstar);
    	$('#mtndew').data(mtndew);
    	$('#pepsi').data(pepsi);
    	$('#drpepper').data(drpepper);
    	
    });
    	
    
    /////////////////////////////
    function purchase(arguments)
    {
    	var id = this.id;
    	var drink = $('#' + id).data();
    	
    
    	var requiredMoney = drink.price;
    	var drinkName = drink.name;
    	var insertedMoney = document.getElementById('box1').value;
    	var changeDisplay = document.getElementById('box2');
    	var productDisplay = document.getElementById('box3');
    	var change = insertedMoney-requiredMoney;
    	var result = change.toFixed(2);
    	
    	if(insertedMoney >= requiredMoney)
    	{	
    		changeDisplay.value = result;
    		productDisplay.value = drinkName;
    		document.getElementById('box1').value = 0;
    		document.getElementById("thanks").innerHTML="Thank you for your purchase!";
    	}
    	else
    	{
    		alert("Insufficient funds.");
    	}
    }

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Is this a JQuery javascript?
    As is, I get an $ is undefined error.

  • #9
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes it has JQuery, I'm sorry I forgot about that. I will attach a zip.Vending Machine.zip

  • #10
    New Coder
    Join Date
    Jul 2011
    Location
    Mayer, MN
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found the problem:

    The button being pressed was assigned a class that was being used elsewhere, causing a conflict. Thanks for giving it a shot jmrker!

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by jake_merringer View Post
    I found the problem:

    The button being pressed was assigned a class that was being used elsewhere, causing a conflict. Thanks for giving it a shot jmrker!
    You're most welcome.
    I'm glad you found the problem as it is difficult to evaluate without the code.

    Good Luck!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •