2017-02-04 2 views
0

J'ai examiné toutes les autres questions/solutions liées à ce problème et je ne trouve pas la solution.document.getElementById() renvoie NULL en cas d'appel à partir d'un fichier JS externe

J'ai une page aspx de base avec un bouton. OnClick appelle une fonction JS. la fonction Javascript appelle document.getElementById() qui fonctionne. J'appelle alors une sous-fonction qui vit dans un fichier JA externe et le même appel échoue. Pourquoi?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jstest.aspx.cs" Inherits="jstest" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:CheckBox runat="server" ID="RunAtStartup" OnClick="function1();" text="Click Me" /> 
    </div> 
    </form> 

    <script> 
    function function1() 
    { 
     if (document.getElementById("<%= RunAtStartup.ClientID %>") == null) 
      alert('function1 null'); 
     else 
      alert('function1 not null'); 
     function2(); 
    } 
    </script> 
    <script src="./function2.js"></script> 
</body> 
</html> 

et le fichier javascript externe function2.js est

function function2() { 
    if (document.getElementById("<%= RunAtStartup.ClientID %>") == null) 
     alert('function2 null'); 
    else 
     alert('function2 not null'); 
} 

Le résultat de cliquer sur le bouton montrera que function1 est « non nulle » et fonction2 est « nul ».

J'ai essayé de transmettre un document en tant que paramètre, cela n'a pas fonctionné. J'ai essayé de faire une fonction2(). Bind (document), cela n'a pas fonctionné. J'ai traversé le débogueur javascript et il semble que l'objet document dans la fonction1 est identique à l'objet document dans la fonction2.

Merci à l'avance Michael

+0

est le nom de votre fichier js function2.js ?? –

+0

Voir la réponse ci-dessous. Vous mélangez essentiellement le code côté serveur '<%= ...%>' dans votre fichier '.js'. – EdSF

Répondre

3

Le nom de l'élément, de ce que je peux dire, est créé par le préprocesseur ASP.net. Étant donné que le fichier JS n'est pas analysé dans ASP.net, il traite le sélecteur littéralement, plutôt que comme un véritable ID d'élément. Par conséquent, ce script ne peut pas être exécuté à partir d'un fichier JS externe. Dans le fichier ASP, il remplace

<%= RunAtStartup.ClientID %> 

avec un ID élément réel. Le fichier externe est à la recherche de quelque chose comme ceci:

<span id="<%= RunAtStartup.ClientID %>"></span> 

Encore une fois, il traite l'ID comme une chaîne littérale, comme si vous exécuté sur un serveur sans ASP.net installé. Ma solution serait sans doute de stocker l'ID dans une variable dans le fichier ASP.net, comme ceci:

var id = "<%= RunAtStartup.ClientID %>"; 

Ensuite, le fichier JS externe pourrait utiliser les éléments suivants:

var element = document.getElementByID(id); 

La JS externe le fichier devrait, bien sûr, être inclus après la création de la variable id. Sinon, une solution serait encore mieux de passer l'ID en tant que paramètre de fonction, comme ceci:

function function2(id) { 
    if (document.getElementById(id) == null) 
     alert('function2 null'); 
    else 
     alert('function2 not null'); 
} 

Le fichier ASP.net pourrait appeler le fichier comme ceci:

function2("<%= RunAtStartup.ClientID %>"); 

Cela permet tous les tags ASP.net doivent être analysés côté serveur avant d'être remis au client avec le code JS.

+0

Merci ... c'est tout à fait logique. ASP ne va pas analyser et traiter les fichiers .js. Merci d'avoir répondu! – WebDrive

+0

@WebDrive Bien sûr, pas de problème. Toujours heureux d'aider! –