Dabby Posted September 27, 2013 Share Posted September 27, 2013 Hello, I am writing a code that allows user create item, select amount to be created, name it and choose a color for it. I have a global counter that is supposed to keep count of items created and also give each item create unique id. The issue is when i click to create item, the ids do not increment. How do i increment counter, save items in array and reset counter? This is what i have tried. var items = []; window.onload = init; var counter = 0; var radioButton = 0; function init() { var create = document.getElementById("create"); create.onclick = create; } function create() { var nameInput = document.getElementById("name"); var name = nameInput.value; var colorSelect = document.getElementById("color"); var colorOption = colorSelect.options[colorSelect.selectedIndex]; var color = colorOption.value; if (name == null || name == "") { alert("please enter a name"); return; } for (var i = 0; i < data.elements.amount.length; i++) { if (data.elements.amount.checked) { var amount = data.elements.amount.value; } } for (radioButton = 0; radioButton < amount; radioButton++) { var div = document.getElementById("arena"); var div = document.createElement("div"); var newId = div; newId = radiobutton; div.id = newId; div.name = name; } This is the HTML for to create item <ol> <li>How many items do you want to create?<br> <input type="radio" id="four" name="amount" value="4"> <label for="five">4</label><br> <input type="radio" id="eight" name="amount" value="8"> <label for="ten">8</label><br> <input type="radio" id="twelve" name="amount" value="12"> <label for="fifteen">12</label><br> </li> </ol> Thanks in advance for your help Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 Hello, I am writing a code that allows user create item, select amount to be created, name it and choose a color for it. I have a global counter that is supposed to keep count of items created and also give each item create unique id. OK, let's think through this. You want to create an array that will contain items. What is the structure of an item in the array? I'm guessing you want to list the items on the screen. What do you want to appear on the screen? Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 The name of item, color of item and id of item. I have part of my code working. But i am having difficulties resetting counter after i clear the field. I have this code for clearing the field. var clear = document.getElementById("clear"); clear.onclick = clear; Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 Well, you might have problems if you name both the variable and the function 'clear.' Try... var c = document.getElementById("clear");c.onclick = clear; What I don't understand is what you are attempting to accomplish with createElement(). Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 I'm trying to create boxes with different colors. Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 OK, so when they say they want 15 items you are going to create 15 colored divs? This description is too vague. Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 Yes when they want 15 i create 15, when the want 5 i create 5 etc. My code creates that already. Only issue is after creating 15 or 5 as the case may be, when i clear my page, i would want to reset my counter. Thank U Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 (edited) So at the bottom of the screen you want to see what? An id such as "1" followed by a name followed by 4,8, or 12 colored blocks? Let's finish the HTML so I know what you are entering... <ol><li>How many items do you want to create?<br> <input type="radio" id="four" name="amount" value="4"> <label for="five">4</label><br> <input type="radio" id="eight" name="amount" value="8"> <label for="ten">8</label><br> <input type="radio" id="twelve" name="amount" value="12"> <label for="fifteen">12</label><br></li></ol> Edited September 27, 2013 by davej Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 <ol><li>How many items do you want to create?<br><input type="radio" id="five" name="amount" value="5"><label for="five">5</label><br><input type="radio" id="ten" name="amount" value="10"><label for="ten">10</label><br><input type="radio" id="fifteen" name="amount" value="15"><label for="fifteen">15</label><br></li></ol> As many as the user indicates on the radio button. But once i clear the scene, i want the loop to start all over AT 0 Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 Yes, but where is the name entered? Where does the ID or color come from? Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 <ol> <label for="name">Name: </label> <input type="text" id="name" size="30"> </li> <li>Pick a color: <br> <select id="color"> <option value="blue">Red</option> <option value="pink">Orange</option> <option value="grey">Yellow</option> </select> </li> Sorry i should have posted this along side. </ol> Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 And then you have a button at the bottom? Link to comment Share on other sites More sharing options...
Dabby Posted September 27, 2013 Author Share Posted September 27, 2013 Yes a button to create and a button to clear. Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 (edited) Ok, I was seeing something strange but it was just a button default that I was unfamiliar with. Here is something to look at... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>dabby create</title><style>.longDiv{height: 32px;}.shortDiv{width: 30px;height: 30px;border: 1px solid black;margin-right: 1px;float: left;}</style><script>var items = [];var cnt;//var radioButton = 0;window.onload = init; function init() { document.getElementById("create").onclick = create; document.getElementById("clear").onclick = init; document.forms['form1'].reset(); document.getElementById('out').innerHTML = ''; cnt = 0; items = [];} function create() { var nameInput = document.getElementById("name"); var name = nameInput.value; var colorSelect = document.getElementById("color"); var colorOption = colorSelect.options[colorSelect.selectedIndex]; var color = colorOption.value; if (name == null || name == "") { alert("please enter a name"); return; } var len = document.forms['form1'].elements['amount'].length; for (var i = 0; i < len; i++) { if (form1.elements.amount[i].checked) { var amount = form1.elements.amount[i].value; } } if (amount == null || amount == undefined) { alert("please enter an amount"); return; } //alert(cnt +':'+ name +':'+ color +':'+ amount); var item1 = {'id':cnt, 'name':name, 'color':color, 'amount':amount}; items[cnt] = item1; cnt++; var out = document.getElementById('out'); out.innerHTML = ''; for(var i=0 ; i<items.length ; i++){ out.innerHTML += '<br/>Id: '+ i +' Name: '+ items[i].name +' Color: '+ items[i].color +' Amount: '+ items[i].amount; addBlocks(items[i].amount,items[i].color); }}function addBlocks(amt,color){ var out = document.getElementById('out'); var div1 = document.createElement("div"); div1.className = 'longDiv'; var div2; for(var i=0 ; i<amt ; i++){ div2 = document.createElement("div"); div2.className = 'shortDiv'; div2.style.backgroundColor = color; div1.appendChild(div2); } out.appendChild(div1);}</script></head><body><form name="form1"><p>Create items:</p> <ol><li><label for="name">Name: </label><input type="text" id="name" size="30"></li><li>Pick a color: <br> <select id="color"> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> </select></li><li>How many items do you want to create?<br> <input type="radio" id="id4" name="amount" value="4"> <label for="id4">4</label><br> <input type="radio" id="id8" name="amount" value="8"> <label for="id8">8</label><br> <input type="radio" id="id12" name="amount" value="12"> <label for="id12">12</label><br></li></ol><input type="button" id="create" value="Create"/><input type="button" id="clear" value="Clear"/></form><div id="out"></div></body></html> Edited September 27, 2013 by davej 1 Link to comment Share on other sites More sharing options...
Dabby Posted September 28, 2013 Author Share Posted September 28, 2013 Thanks alot. Very helpful. Link to comment Share on other sites More sharing options...
Dabby Posted September 28, 2013 Author Share Posted September 28, 2013 @davej, worked well but please t what point does both the counter and the items array get reset. I tested your code an after i cleared, it set back as if the page had just loaded. What part of the code makes it act that way? Link to comment Share on other sites More sharing options...
davej Posted September 28, 2013 Share Posted September 28, 2013 If you look at the init function you will see that the Clear button click event is set to call the init function. The window.onload event also calls the init function. If you want to you can create another function for the Clear button to use. 1 Link to comment Share on other sites More sharing options...
Dabby Posted September 30, 2013 Author Share Posted September 30, 2013 Thanks alot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now