Appel en instance de classe de la méthode onclick javascript

Votre code fonctionne très bien en supposant que c'est à la portée globale, sauf que vous ne pouvez pas utiliser document.write après le chargement de la page. Donc:

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        alert(this.instanceData); //<=== only change here
    }
}

var classInstance = new MyClass();

...fonctionne très bien avec votre onclick attribut. Live exemple | source

document.write est principalement pour une utilisation pendant le chargement de la page. Si vous appelez après chargement de la page, il implique un document.open qui efface le document courant et remplace avec le contenu que vous écrivez. Si vous souhaitez ajouter à la page d'après le chargement de la page, utilisez createElement et appendChild, définir le contenu de l'élément via innerHTML. Par exemple:

var p = document.createElement('p');
p.innerHTML = "Hi there";
document.body.appendChild(p);

...ajoute un paragraphe contenant "Bonjour" à la page.

Cependant, je vous demande instamment de ne pas utiliser onclick attributs et tels, pas moins parce qu'ils nécessitent l'accès aux variables et fonctions globales, et je plaide pour éviter d'avoir des variables globales et des fonctions dans la mesure où vous pouvez (et vous pouvez presque complètement les éviter). Au lieu de cela, utiliser des méthodes modernes de raccordement des gestionnaires d'événement: addEventListener et (à l'appui de IE8 et plus tôt) attachEvent.

Ainsi changer votre exemple, afin de ne pas créer tout globals:

(function() {
    function MyClass()
    {
        this.instanceData = "Display Me";

        this.DisplayData = function()
        {
            alert(this.instanceData);
        }
    }

    var classInstance = new MyClass();

    //...and hook it up
    var button = document.getElementById("theButton");
    if (button.addEventListener) {
        button.addEventListener('click', function() {
            classInstance.DisplayData();
        }, false);
    }
    else if (button.attachEvent) {
        button.attachEvent('onclick', function() {
            classInstance.DisplayData();
        });
    }
    else {
        //Very old browser, complain
    }
})();

(Notez que le nom de l'événement est "click" avec addEventListener, "onclick" avec attachEvent.)

Qui suppose que le bouton ressemble à ceci:

<button id="theButton">Click Me!</button>

...et que votre code s'exécute après que le bouton a été déjà mis sur la page (par exemple, votre script est au bas de la page ou qui s'exécute en réponse à un événement).

Maintenant, c'est une douleur pour vérifier si l'utilisation de addEventListener ou attachEvent à chaque fois. En outre, vous ne voulez pas que chaque élément que vous devez travailler avec des d'avoir un id. C'est là que l'aide d'une bonne bibliothèque JavaScript comme jQuery, Prototype, YUI, Fermeture, ou plusieurs autres est utile. Ils s'atténuent au cours de la manifestation des trucs (et de nombreux autres particularités) pour vous, et de fournir des fonctionnalités utiles pour la localisation des éléments d'une autre façon que par id (dans de nombreux cas, le soutien près de tous les CSS-les sélecteurs de style, même sur les vieux navigateurs qui n'ont pas querySelector /querySelectorAll construit dans.