How to bind DOM objects to a JS object

Question

I'm working on a simple game and struggling with how to bind my DOM objects to the JS objects that spawn them. This used to be very easy back in the days of Flash - the object and it's visual representation were one and same! What's the best way to do this with JS/HTML? Here's a stripped down example of what I'm trying to do:

<body>

    <div id="pond"></div>

</body>

<script>

    function fish() {
        this.genotype = 'GATTACA';        
        this.phenotype = '<div class="fish" onclick=reveal()></div>';
    }

    shark = new fish();

    $(shark.phenotype).appendTo("#pond");

    function reveal() {
        alert(this.genotype);
    }

</script>

perhaps shark.boundElement = $(shark.phenotype).appendTo("#pond"); ... depends on what jquery appendTo returns I guess — Bravo
– Bravo, Commented Oct 31, 2019 at 22:19
Here's a stripped down example of what I'm trying to do You'll have to give us more than that. Try explaining it. — Scott Marcus
– Scott Marcus, Commented Oct 31, 2019 at 22:20
Use a modern framework that does binding, if you are learning JS development then jQuery is not the thing to be learning. You would be much better off using your time to learn Angular, Vue or React. — Adrian Brand
– Adrian Brand, Commented Oct 31, 2019 at 22:26

Barmar · Accepted Answer · 2019-10-31 22:21:53Z

2

Use .data() to associate the object with the DOM element.

function fish() {
  this.genotype = 'GATTACA';
  this.phenotype = '<div class="fish" onclick="reveal(this)">Click to see genotype</div>';
}

shark = new fish();
$(shark.phenotype).data('fish', shark).appendTo("#pond");
function reveal(element) {
  alert($(element).data('fish').genotype);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pond"></div>

answered Oct 31, 2019 at 22:21

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Collectives™ on Stack Overflow

How to bind DOM objects to a JS object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related