IE7 se plaint de l'ID du label en javascript

Question

Ok, je suis en train de développer un programme simple pour faire des requêtes xmlhttprequests afin de pouvoir comprendre comment elles fonctionnent. Sur cette page, j'ai une simple zone de texte, une étiquette et un bouton. Lorsque le bouton est cliqué, il envoie une requête à une autre page via la méthode javascript, et il stocke la réponse dans le label.

(c'est tout le code dans le corps)

<form id="form1" runat="server">
        <div>
            <input type="text" id="text1" value="StuffInTheBox" name="text1"/>
            <label id="label1">Please Enter Name.</label>
        </div>
</form>
<button id="button1" onclick="checkName(text1.value,'')">BUTTON</button>

Cela fonctionne parfaitement dans google chrome. Mais quand j'ai voulu l'essayer dans IE7, j'ai eu une erreur. Il a dit "Error : 'text1' is undefined". J'ai essayé de modifier tout ce que je pouvais pour voir si cela faisait une différence, mais maintenant je suis un peu perdu.

Toute aide serait très appréciée.

éditer : fonction checkname par demande

La méthode appelle loadXMLDoc qui crée l'objet xmlhttprequest, bifurquant la construction pour les anciens IE qui utilisent ActiveX et les navigateurs modernes qui l'ont en natif. Elle crée également une méthode pour observer le changement de statut, et si elle est effectuée avec succès, elle rappelle checkname avec checkName('',results)

function checkName(input, response)
    {        
      if (response != ''){ 
        // Response mode
        message   = document.getElementById('label1');
        message.innerHTML = response;

      }else{
        // Input mode
        loadXMLDoc("http://localhost/xmlTest/Return.aspx","input="+input);
      }
    }

Answer 1

Dans votre JavaScript "checkName(text1.value,'')", il n'est pas clair ce à quoi text1.value fait référence. Vous supposez qu'il fait référence à l'objet DOM que vous avez déclaré dans votre HTML et FireFox semble faire cette affirmation également, mais IE ne le fait pas. text1 pourrait facilement être une référence à un objet déclaré plus tôt dans votre code JavaScript.

var text1 = {value: ""};

Franchement, je suis surpris que FireFox n'ait pas lancé une erreur.

Lorsque vous vous référez à des objets DOM (c'est-à-dire à des éléments HTML), vous devez utiliser la balise document.getElementById o document.getElementsByName méthodes.

L'exemple suivant a été testé et fonctionne à la fois dans FireFox et IE et je suppose qu'il fonctionne également dans Chrome, Safari et Opera.

<form id="form1" runat="server">
        <div>
            <input type="text" id="text1" value="StuffInTheBox" name="text1"/>
            <label id="label1">Please Enter Name.</label>
        </div>
</form>
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>

Answer 2

"text1" est l'identifiant de l'entrée, mais vous n'avez pas déclaré que la variable text1 dans le JavaScript s'y réfère.

Peut-être cela vous conviendra-t-il :

<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>

Il utilise document.getElementById pour récupérer l'entrée avant d'essayer de trouver sa valeur.