How to add an event listener to html created by an object in JavaScript

Question

I'm creating objects in JavaScript that contain html, which are basically buttons that contain dynamically created words and do functions that use those words. I need to be able to attach onclick event handlers on them either when they're created or afterwards.

var MyClass = function(word) {
    this.word = word;
    this.wordHtml = '<span class="option">' + word + '</span>';

    var wordArea = document.getElementById('wordArea');

    this.displayWordButton = function() {
        wordArea.innerHTML += this.wordHtml;
    };
}

var myObject = new MyClass("sampleWord");
myObject.displayWordbutton();

It's adding all the buttons correctly but I can't get them to be clickable.

I've tried myObject.onclick = sampleFunction(); but it seems to activated the click event when the object is created and not when actually clicked.

I've tried adding an onclick attribute directly to the span in the class, but it doesn't function.

Nicolas Bouvrette · Accepted Answer · 2016-06-26 04:03:41Z

3

You need to stop using innerHTML and start using objects. Afterall JavaScript's entire design is made out of objects. Here would be a remake of your code using objects which you can easily add events to:

var MyClass = function(word) {
    this.word = word;
    this.wordElement = document.createElement('span');
    this.wordElement.classList.add('option');
    this.wordElement.appendChild(document.createTextNode(word));
    this.wordElement.addEventListener('click', function() {
        alert('hello world');
    });

    var wordArea = document.getElementById('wordArea');

    this.displayWordButton = function() {
        wordArea.appendChild(this.wordElement);
    };
};

var myObject = new MyClass("sampleWord");
myObject.displayWordButton();

edited Jun 26, 2016 at 4:03

answered Jun 26, 2016 at 3:51

Nicolas Bouvrette

4,9312 gold badges46 silver badges67 bronze badges

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

4 Comments

Rib_Eye Over a year ago

When I use this in my code, I get an "Uncaught TypeError: myObject.displayWordbutton is not a function".

enhzflep Over a year ago

Indeed innerHTML should be used as little possible - though for different reasons than you imply. It's still perfectly possible to add events to elements created via string-concatenation, rather than full-calorie object-creation.

loxxy Over a year ago

@Rib_Eye spelling mistake.. displayWordButton B in caps. Error would be in your code too..

Nicolas Bouvrette Over a year ago

@Rib_Eye I just updated the code, give it a shot but I wasn't able to test it. It's close to be functional. Please post a jsFilddle example if you want me to help further.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

onclick

Syntax :element.onclick = *functionRef*;

-where functionRef is a function - often a name of a function declared elsewhere or a function expression.

Issue :

myObject.onclick = sampleFunction();

will call the function as soon as it is loaded as func() is a function call.

Solution :

Use a reference to the function,

myObject.onclick = sampleFunction;

or if you need to pass args to the click handler,

myObject.onclick = function(){
    sampleFunction(args)
};

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 26, 2016 at 3:51

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

enhzflep · Accepted Answer · 2016-06-26 04:29:48Z

Here's how I'd consider going about it.

There's a few changes from your code, I've chucked-out element creation via string concatenation. I've added the ability for the created objects to be appended to any element when the displayWordButton is pressed, as well as the option of none, which then requires (and allows) manual insertion anywhere in the DOM. I've used proper handlers, instead of inline ones.

Here 'tis:

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
    // this element will have #wordArea as its parent
    var myObject = new MyClass("sampleWord", "wordArea");
    myObject.displayWordButton();

    // these elements may be parented by anyone
    var digits = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
    for (var i=0; i<digits.length; i++)
    {
        myObject = new MyClass(digits[i]+" ");
        document.body.appendChild(myObject);
    }
}

function MyClass(word, idOfFixedTargetOrEmpty) 
{
    var mElem = document.createElement('span');
    mElem.originalWord = word;
    mElem.classList.add('option');
    mElem.appendChild( document.createTextNode(word) );
    mElem.addEventListener('click', function(){alert(this.originalWord);}, false);
    mElem.displayWordButton = function()
    {
        if (idOfFixedTargetOrEmpty !== undefined)
            document.getElementById(idOfFixedTargetOrEmpty).appendChild(this);
    };
    return mElem;
}
</script>
<style>
</style>
</head>
<body>
    <div id='wordArea'></div>
</body>
</html>

Collectives™ on Stack Overflow

How to add an event listener to html created by an object in JavaScript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related