Manipulating the attributes of an object when created dynamically

Question

I want to manipulate the attributes of an object when it is created dynamically.

In the code given below, I would like to increase the like attribute by calling the corresponding functions of the object. However the elements are created dynamically and passing a this in the onclick function will only refer to the anchor tag.

The idea is similar to this forum wherein each question has various ideas that can be approved or disapproved. How can I manipulate each object's attribute independently?

function idea(idea) {
    this.ideatext = idea;
    this.like = 0;
    this.str = "\
    <div class = 'entered'> \
        <div class = 'text'> " + this.ideatext + "</div> \
        <div class = 'anchors'> \
            <a href = '' onclick = 'increase()'> Approve </a> \
            <a href = '' onclick = 'decrease()'> Disapprove </a> \
        </div> \
    </div>";

    this.increase = function() {
        this.like++;
    }
    this.decrease = function() {
        this.like--;
    }
}

var ideaobj1 = new idea(someidea1);
var ideaobj2 = new idea(someidea2);

You will need to somehow tie up the dynamically created elements to the object it is to manipulate. — techfoobar
– techfoobar, Commented Feb 11, 2013 at 12:40
Add the element to the document and then select it and modify its attributes, add event handling... — Salvatorelab
– Salvatorelab, Commented Feb 11, 2013 at 12:42

Creech · Accepted Answer · 2013-02-11 14:22:41Z

1

If you dynamically create javascript code and you want it to refer to other javascript code, you have to know the variable names. No way around that.

<script type="text/javascript">

  function idea(varName, text)
  {
      this.varName = varName;
      this.ideatext = text;
      this.like = 0;
      this.str = "\
      <div class = 'entered'> \
          <div class = 'text'> " + this.ideatext + "</div> \
          <div class = 'anchors'> \
              <a href = '' onclick = '" + this.varName + ".increase()'> Approve </a> \
              <a href = '' onclick = '" + this.varName + ".decrease()'> Disapprove </a> \
          </div> \
      </div>";

      this.increase = function ()
      {
          this.like++;
          return false;
      }
      this.decrease = function ()
      {
          this.like--;
          return false;
      }
  }

  var wing = new idea("wing", "a wing is ...");
  var wheel = new idea("wheel", "a wheel is  ...");

</script>

And use some sort of centralized storage for the created objects. Maybe like this:

  var brain = new Object();
  brain["wing"] = new idea("brain.wing", "a wing is ...");
  brain["wheel"] = new idea("brain.wheel", "a wheel is ...");

answered Feb 11, 2013 at 14:22

Creech

2692 silver badges12 bronze badges

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

1 Comment

Arjun Over a year ago

Alright.. Suppose I create 2 objects - wing and wheel. On the screen, I click wing's Approve, how does this refer to the object WING? @Creech

Remco Haszing · Accepted Answer · 2013-02-11 12:45:36Z

0

Instead of adding an onclick attribute, give the tags a class (I used classes increase and decrease in this example). Then add the following jquery code

$(document)
.on('click', '.increase', function() {
    alert('increase function');
});
.on('click', '.decrease', function() {
    alert('decrease function');
});

answered Feb 11, 2013 at 12:45

Remco Haszing

7,9797 gold badges47 silver badges89 bronze badges

1 Comment

Arjun Over a year ago

won't this affect all the objects that has an increase class attribute?

Salvatorelab · Accepted Answer · 2013-02-11 12:47:14Z

0

You can create elements with the document.createElement method:

var newDiv = document.createElement("div");

And then modify newDiv before adding the element to the document.

More info about document.createElement here: https://developer.mozilla.org/es/docs/DOM/document.createElement

answered Feb 11, 2013 at 12:47

Salvatorelab

11.9k7 gold badges55 silver badges81 bronze badges

Collectives™ on Stack Overflow

Manipulating the attributes of an object when created dynamically

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related