8 Replies - 670 Views - Last Post: 02 August 2014 - 04:20 PM

#1 candicedgy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 01-August 14

How do i clear an array upon click reset button?

Posted 01 August 2014 - 04:56 AM

<html>
<body>
	<form name="try">
	<input type="radio" name="lala" onclick="myFunction2()">Try it</input><br>
	<input type="checkbox" name="peach" value="true" onclick="myFunction(this)">Try it</input><br>
	<input type="checkbox" name="peach" value="love" onclick="myFunction(this)">Try it</input><br>
	<input type="checkbox" value="happy" onclick="myFunction(this)">Try it</input><br>
	<input type="checkbox" value="ness" onclick="myFunction(this)">Try it</input><br>
	<textarea name="totalpriceB" cols="50" rows="5" id="totalpriceB"></textarea>
	<textarea name="count" cols="50" rows="5" id="count"></textarea>
	<input type="reset" name=resetbutton value=Reset onclick="clear()">
	</form>

	<script>
		
		var ingredients = [];

                function clear();
			ingredients= [];

		function myFunction(clicked_element) {
			text = clicked_element.value;
			if(clicked_element.checked) {
				ingredients.push(text);
				document.getElementById('totalpriceB').value = ingredients;
					if(clicked_element.checked) {
						var count = ingredients.length;
						document.getElementById("count").value = count;
						}
			}
			else {
				ingredients.pop(text);
				document.getElementById('totalpriceB').value = ingredients;
				}
		}
		
		function myFunction2(){
			document.try.peach[0].click();
			document.try.peach[1].click();
			}
	</script>

</body>
</html>




I have this so far and it is not working, the reset button deselects the check boxes and radios but does not clear the array. Help please?

Is This A Good Question/Topic? 0
  • +

Replies To: How do i clear an array upon click reset button?

#2 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 05:38 AM

You've got a syntax error on line 18 (function clear(); ?)
Was This Post Helpful? 0
  • +
  • -

#3 candicedgy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 01-August 14

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 07:17 AM

function clear(){
   ingredients.lenght = 0;
}
or
function clear(){
   ingredients = [];
}




changed it to both of those, still not working. :(
Was This Post Helpful? 0
  • +
  • -

#4 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 11:15 AM

You should tidy things up a bit.

<!DOCTYPE html>
<html>
<head>
    <title>Try</title>
    <style>
        textarea{ width: 30em; height: 6em; }
        label:after{ content:""; display: block; }
    </style>
</head>

<body>
    <form name="try">
        <input type="radio" name="lala"/> <label>Try it</label>
        
        <input type="checkbox" value="true" name="peach"/> <label>Try it</label>
        <input type="checkbox" value="love" name="peach"/> <label>Try it</label>
        <input type="checkbox" value="happy"/> <label>Try it</label>
        <input type="checkbox" value="ness"/> <label>Try it</label>
        
        <textarea name="totalpriceB"></textarea>
        <textarea name="count"></textarea>
        
        <input type="reset" name="resetbutton" value="Reset"/>
    </form>
    
    <script>
    
        /* init */
        
        var ingredients = [];
        
        /*elements*/
        
        var form = document.try;
        var inputs = form.getElementsByTagName("input")
        
        /* event functions */
        
        function clear(){
            ingredients = [];
        }
        
        function checkboxClick(){
            text = this.value;
            if(this.checked){
                ingredients.push(text);
                form.totalpriceB.value = ingredients;
                if(this.checked) {
                    var count = ingredients.length;
                    form.count.value = count;
                }
            }
            else{
                ingredients.pop(text);
                form.totalpriceB.value = ingredients;
            }
        }
        
        function radioClick(){
            form.peach[0].click();
            form.peach[1].click();
        }
        
        /* events */
        
        form.onreset = clear;
        
        for(var i=0, j=inputs.length; i<j; i++){
            if(inputs[i].type=="checkbox") inputs[i].onclick = checkboxClick;
            else if(inputs[i].type=="radio") inputs[i].onclick = radioClick;
        }
    
    
    </script>
</body>
</html>


Don't mix id and name attributes in your script. Use either one or the other to select your elements (I prefer id attributes, but if you submit the form the old way to a PHP script it will break it).

Bind your events in your script, not in your HTML

Do the styling in CSS, not in the HTML

Add white spaces, line breaks, comments, make it more easy to read. Note that the less you write in the HTML, the more it's readable.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3807
  • View blog
  • Posts: 13,500
  • Joined: 12-December 12

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 11:30 AM

var form = document.try;

try is a JS keyword so I would give the form a different name, although using an id with JS is better.
Was This Post Helpful? 0
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 12:53 PM

Right. It doens't hurt here, but it could.

I also forgot to mention this point : don't use names like "myFunction", etc. Be more specific and descriptive. It doesn't take more time, it's the opposite : when you need to debug something you're happy to read meaningful code.
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 1,809
  • Joined: 15-January 14

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 02:54 PM

Quote

Right. It doens't hurt here, but it could.

That's stung me a couple times in IE. IE does not like certain keywords to be used as object property names, it will throw a very confusing parse error which will take you a while to figure out what the actual problem is. It really makes me wonder about the capability of the IE parser when it sees a keyword instead of a property identifier after a dot. The same property names work fine with array syntax, but not dot notation.
Was This Post Helpful? 0
  • +
  • -

#8 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: How do i clear an array upon click reset button?

Posted 01 August 2014 - 04:36 PM

Waw. Thanks for sharing. I'm sure it will save my butt one day.
Was This Post Helpful? 0
  • +
  • -

#9 candicedgy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 01-August 14

Re: How do i clear an array upon click reset button?

Posted 02 August 2014 - 04:20 PM

View Postge∅, on 01 August 2014 - 11:15 AM, said:

You should tidy things up a bit.

<!DOCTYPE html>
<html>
<head>
    <title>Try</title>
    <style>
        textarea{ width: 30em; height: 6em; }
        label:after{ content:""; display: block; }
    </style>
</head>

<body>
    <form name="try">
        <input type="radio" name="lala"/> <label>Try it</label>
        
        <input type="checkbox" value="true" name="peach"/> <label>Try it</label>
        <input type="checkbox" value="love" name="peach"/> <label>Try it</label>
        <input type="checkbox" value="happy"/> <label>Try it</label>
        <input type="checkbox" value="ness"/> <label>Try it</label>
        
        <textarea name="totalpriceB"></textarea>
        <textarea name="count"></textarea>
        
        <input type="reset" name="resetbutton" value="Reset"/>
    </form>
    
    <script>
    
        /* init */
        
        var ingredients = [];
        
        /*elements*/
        
        var form = document.try;
        var inputs = form.getElementsByTagName("input")
        
        /* event functions */
        
        function clear(){
            ingredients = [];
        }
        
        function checkboxClick(){
            text = this.value;
            if(this.checked){
                ingredients.push(text);
                form.totalpriceB.value = ingredients;
                if(this.checked) {
                    var count = ingredients.length;
                    form.count.value = count;
                }
            }
            else{
                ingredients.pop(text);
                form.totalpriceB.value = ingredients;
            }
        }
        
        function radioClick(){
            form.peach[0].click();
            form.peach[1].click();
        }
        
        /* events */
        
        form.onreset = clear;
        
        for(var i=0, j=inputs.length; i<j; i++){
            if(inputs[i].type=="checkbox") inputs[i].onclick = checkboxClick;
            else if(inputs[i].type=="radio") inputs[i].onclick = radioClick;
        }
    
    
    </script>
</body>
</html>


Don't mix id and name attributes in your script. Use either one or the other to select your elements (I prefer id attributes, but if you submit the form the old way to a PHP script it will break it).

Bind your events in your script, not in your HTML

Do the styling in CSS, not in the HTML

Add white spaces, line breaks, comments, make it more easy to read. Note that the less you write in the HTML, the more it's readable.



Thank you so much for taking the time to rewrite my sucky codes!! And also, I will take note of your feedback. I will try to tidy things more in the future. :)

View Postge∅, on 01 August 2014 - 12:53 PM, said:

Right. It doens't hurt here, but it could.

I also forgot to mention this point : don't use names like "myFunction", etc. Be more specific and descriptive. It doesn't take more time, it's the opposite : when you need to debug something you're happy to read meaningful code.


Thank you for the comment, I will take note of this! :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1