How do i save data in array and reset counter

[Dabby]

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

[davej]

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?

[Dabby]

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;

[davej]

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().

[Dabby]

I'm trying to create boxes with different colors.

[davej]

OK, so when they say they want 15 items you are going to create 15 colored divs? This description is too vague.

[Dabby]

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

[davej]

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

[Dabby]

<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

[davej]

Yes, but where is the name entered? Where does the ID or color come from?

[Dabby]

<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>

[davej]

And then you have a button at the bottom?

[Dabby]

Yes a button to create and a button to clear.

[davej]

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

[Dabby]

Thanks alot. Very helpful.

[Dabby]

@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?

[davej]

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.

[Dabby]

Thanks alot