How to assign a div to an array?

Hello everyone, I’m working on a small project to help me improve my JavaScript skills and I’m currently at a standstill. I don’t really have any code to show you but I’ll try to explain it as clearly as possible and hopefully you can guide me in the right direction.

I have a form where a user can select multiple values from a drop down box and based on the value selected certain divs will display: block from being hidden. So in JavaScript I tried creating an array with values for each div, for instance:

var tgp0 = new Array(28, 36, 38);
var tgp1 = new Array(32, 36, 38);

function updateProducts() {
var index = document.formName.selectName.selectedIndex;
var value = document.formName.selectName.options[index].value;

Here I can get the value of the select box option. But from this point on I don’t know what else that I can really do. How can I loop through each array and after I compare the variable value to the array’s values how do I display the certain divs? How would I assign a div to an array?

document.getElementById("tgp_" + i).style.display = "block";

My divs have id of tgp_1 … tgp_2 … etc.

Thanks for any help really appreciate it.

tip: drop-downs have a value as well:

function updateProducts() {
    var value = document.formName.selectName.value;
    // …

tip: arrays have a literal:

var tgp0 = [28, 36, 38];

as for the main problem, it were easier to group the divs by a common class name than by explicit id listing, so you can get all divs of a group by (e.g.) document.querySelectorAll('.group-name'). from there it would even be possible to put the divs into an array.

additionally, it’s by far easier to assign CSS classes to control hide/display then doing it on a per-element basis. you could for instance hide all shown divs (of a common group) by removing the ‘show’ class.

Hi there thanks for responding. I have some code if you don’t mind taking a look at. Is this pretty much the way you go about assigning each div to an array. I wasn’t to sure if q[i] = tgp+i would work or not.

var tgp0 = new Array(28, 36, 38);
var tgp1 = new Array(32, 36, 38);

var q = document.querySelectorAll(".idiv");
for (var i=0; i<q.length; i++) {
  q[i] = tgp+i;
}

Thanks for your help, greatly appreciated.

that code is nonsense. you’re trying to overwrite an already existing NodeList.

maybe we should figure out first what “assigning each div to an array” is supposed to mean. document.querySelectorAll(".idiv") already gives you a kind of array (called NodeList)

Hi again, I don’t really know anymore. I thought I could take querySelectorAll and loop through the length, then assign each div to an array but clearly that’s wrong. I wanted to have this so I could compare values then display accordingly.

Can you give us further details on what you are wanting to achieve, from the users perspective?
If so, then I believe that there are standard techniques that are more likely to be successful for you.

Okay so there will be a form with 2 option drop select boxes with numeric values. So when the user selects 1 option from each of the 2 boxes then certain products will display that are equal to the value in those select boxes.

I have multiple arrays for each product and I don’t know how I can compare the value to each of those arrays let alone display the correct divs that those arrays represent.

Thanks for your help.

Is it going to be only items that are exactly the price of the two values, or are the two values representing a minimum and maximum price that the person wants to spend?

Yea the only items that are exactly the price of the two values.

Good one, in that case you can store information about the items in an array indexed by their price, so that you can then easily retrieve information about everything that is a certain price.

var itemList = {
    28: [
        {name: "An item", desc: "A description of the item"},
        {name: "Another item", desc: "Another description of an item"}
    ],
    32: [
        {name: "A less cheap item", desc: "A description of the less cheap item"},
        {name: "Another less cheap item", desc: "Another description of a less cheap item"}
    ],
    ...
};

You can then retrieve information about them at any stage, with:

var items = itemList[form.selectName.value];
items.forEach(function (item) {
    // show the item
});

Thank you very much.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.