assign parameter value of an object javascript

Question

I have been looking at this code for a long time trying to figure this out, but I am having no luck. This issue is that I want to assign a value to the parameter boxId. When I click on a box in the webpage an alert will come up displaying that id. I have tried many things, but nothing seems to work. I'm a beginner, so I feel at this point there just must be something that I don't know how to do.

constructor function:

 function Box (boxId, name, color, number, coordinates) {  
   this.boxId = boxId;
   this.name = name;
   this.color = color;
   this.number = number;
   this.coordinates = coordinates;
  }

global variables:

  var boxes = []; 
  var counter = 0; 
  var boxId = 0;

init function:

  window.onload = init;

  function init() {     
   var generateButton = document.getElementById("generateButton");
   generateButton.onclick = getBoxValues;   
   var clearButton = document.getElementById("clearButton");
   clearButton.onclick = clear;   
  }

function to get values and create new boxes:

  function getBoxValues() {
   var nameInput = document.getElementById("name");  
   var name = nameInput.value; 

   var numbersArray = dataForm.elements.amount;
   for (var i = 0; i < numbersArray.length; i++) {
   if (numbersArray[i].checked) {
     number = numbersArray[i].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 for your box");
     return;
   }
   else {
    var newbox = new Box(boxId, name, color, number, "coordinates");  
    boxes.push(newbox);
    counter++;
    var boxId = counter;
    }

    addBox(newbox);

   var data = document.getElementById("dataForm");               
    data.reset();
   }

function that adds boxes to the page:

 function addBox(newbox) {  
   for (var i = 0; i < newbox.number; i++) {                            
   var scene = document.getElementById("scene");              
   var div = document.createElement("div");                   
   div.className += " " + "box"; 
   div.innerHTML += newbox.name; 
   div.style.backgroundColor = newbox.color; 
   var x = Math.floor(Math.random() * (scene.offsetWidth-101));
   var y = Math.floor(Math.random() * (scene.offsetHeight-101));
   div.style.left = x + "px";
   div.style.top = y + "px"; 
   scene.appendChild(div); 
   div.onclick = display;                         
    }                  
  }

function to display alert when box is clicked:

  function display(e) {
  var a = e.target;
  alert(a.counter);
  }

function to clear boxes:

function clear() {
  var elems = document.getElementsByClassName("box");
  for ( k = elems.length - 1; k >= 0; k--) {
   var parent = elems[k].parentNode;
   parent.removeChild(elems[k]);
  }
  }

All of the other functions work just fine. I keep running into the id showing up as "undefined" when I click it, or the counter displaying "0" in the console log, for everything I've tried.

dataForm is the name of my form. sorry, if forgot to say that I'm getting all of those values from a form. so the value of number comes from a radio button the user chooses — user1876829
– user1876829, Commented Jan 17, 2013 at 19:57
var boxId = counter; cause boxId at new Box(boxId,.. to be local variable. Try remove 'var' from that statement. — runTarm
– runTarm, Commented Jan 17, 2013 at 19:59
e.target is actually a <div> DOM element not a javascript object. Can you simply embed boxId as a <div> tag's attribute and retrieve it later? — runTarm
– runTarm, Commented Jan 17, 2013 at 20:18

runTarm · Accepted Answer · 2013-01-18 07:08:28Z

1

You can do it like this.

First, in addBox() embed boxId as an tag's attribute like this:

div.setAttribute('data-boxId', newbox.boxId);

Then in display() you can retrieve it back:

alert(e.target.getAttribute('data-boxId'));

Please tell if you do not prefer this approach and I will post an alternative (closure things).

Edit: Add jsfiddle example http://jsfiddle.net/runtarm/8FJpU/

edited Jan 18, 2013 at 7:08

answered Jan 17, 2013 at 20:35

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1876829 Over a year ago

thanks for the idea, but it doesn't seem to work in this case. sorry to take so long to get back to you

runTarm Over a year ago

It throw any error? The alert still show undefined? Or what the problem you encounter?

user1876829 Over a year ago

it shows 0 for every box that I click, so I think it's counting all the boxes as having the same place in the array

runTarm Over a year ago

check the jsfiddle example above.

Lee Meador Over a year ago

I used the Chrome debugger to single step through the jsFiddle. It seems to be doing all the OP wants.

Lee Meador · Accepted Answer · 2013-01-17 20:00:37Z

0

One more try. Perhaps if you change:

var boxId = counter;

to

boxId = counter;

It will then use the boxId from the outer scope instead of the one defined in the function getBoxValues()

answered Jan 17, 2013 at 20:00

Lee Meador

13k2 gold badges38 silver badges43 bronze badges

Collectives™ on Stack Overflow

assign parameter value of an object javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related