CODEWITHSUNDEEP
javascriptdom-events
d_mun
d_mun

Reputation: 5

How to pass variable value from one function to another

I am taking a class in JavaScript and this is my final project. So I am new to JavaScript.

The application asks a user for a name, color and number of "boxes" to create. After they are created, the user can click on a box to get a message that states its ID, NAME, COLOR and the top position (XPOS) and left position (YPOS) of the box.

What I get now is all correct, except for XPOS and YPOS comes up as undefined. If I replace the this.xpos and this.ypos in the display() function to just xpos and ypos, I get the values of the last box created.

It seems (to my untrained eye) that the creation of the ID and the XPOS, YPOS are similar and should work the same. So why does the ID show correctly and not the 2 position variables? Any help would be appreciated.

var name;
var id;
var color;
var amount;
var xpos = 0;
var ypos = 0;

function Box(id, name, color, xpos, ypos) {     //element constructor function
   this.id = id;
   this.name = name;
   this.color = color;
   this.xpos = xpos;
   this.ypos = ypos;
}
var box
var boxes = [];
var counter = 0;

window.onload = init;

function init() {
   var generateButton = document.getElementById("generateButton");
   generateButton.onclick = generate;

   var clearButton = document.getElementById("clearButton");
   clearButton.onclick = clear;
}

function generate() {
   var dataForm = document.forms.data;              //create var for the form collection
   var nameInput = document.getElementById("name");     //get text input for name of Amazing Boxes
   name = nameInput.value;
   if(name == null || name == "") {             //check to see if the input box is empty
         alert("***Please enter valid text for a name***"); //if it is empty, alert user
         nameInput.focus();
         return;
      }  

   var colorList = dataForm.elements.color;         //get color choice for Amazing Boxes
   color = colorList.value;

   var radioPick = dataForm.elements.amount;            //get the choice for number of Amazing Boxes
      for(var i = 0; i < radioPick.length; i++) {
         if (radioPick[i].checked) {
         amount = radioPick[i].value;
         }
      }      
         if(amount == null || amount == "") {                   //test to make sure the user has checked an amount
            alert("***Please choose an amount of boxes to be generated***");
            return false;
         }
         else {   
            while(amount > 0) {
               var sceneDiv = document.getElementById("scene");
               xpos = Math.floor(Math.random() * (sceneDiv.offsetWidth-101));   //get a random number for box position
               ypos = Math.floor(Math.random() * (sceneDiv.offsetHeight-101));  //get a random number for box position
               id = counter;
               var div = document.createElement("div");             //create new div element
               div.setAttribute("id", id);                  //give the new div an id = to the var id
               div.setAttribute("class", "box");                    //give the new div a class = to box
               div.innerText = name;                        //set text on box to the name
               sceneDiv.appendChild(div);                       //make the new div a child element of the scene div
               div.style.left = xpos + "px";
               div.style.top = ypos + "px";
               div.style.backgroundColor = color;
               div.onclick = display;
               counter ++;                          //increment counter var to get different box ids
               amount--;
            }
         }
         dataForm.reset();
         nameInput.focus();
}

function display() {
   alert("The ID of this box is " + this.id + " and it is named " + name + ".  It's color is " + color +
          " and is located at " + this.xpos + " and " + this.ypos + ".");
}

Upvotes: 0

Views: 1537

Answers (1)

Katsuyuki Omuro
Katsuyuki Omuro

Reputation: 597

Because of the following code:

div.onclick = display

The display function runs in the context of the div object in response to a click event. At this time, the this.id property (think div.id) contains the value you assigned to it. But the other values: this.xpos and this.ypos don't contain the values you are intending to be assigning to them.

Your code looks like it wants to run display in the context of a Box object. You need to create a new Box at some point and assign values to it. One way you might do this is by replacing:

div.onclick = display

with:

div.box = new Box(id, name, color, xpos, ypos);
div.onclick = function() { display.call(this.box); };

This is not the cleanest way to do what you want but it show you some mechanisms, and you will hopefully be able to use it as a starting point.

Upvotes: 1

Related Questions