2010-02-12 20 views
9

ok im neu in Javascript, aber im innerhtml eines div-Tag zu ändern versuchen, heres mein Skript und seine nicht funktioniert:javascript Änderung innerHTML-

<head> 
<script type="text/javascript"> 
function var1() { 
document.getElementById('test').innerHTML = 'hi'; 
} 
window.onLoad = var1(); 
</script> 
</head> 
<body> 
<div id="test">change</div> 
</body> 

sollte es aus irgendeinem Grund arbeiten, aber für seine nicht jede Hilfe?

+0

Der Ausdruck "nicht funktioniert" umfasst eine Menge von Szenarien. Was genau ist der Fehler? –

+0

Theres kein Fehler, es ändert nur nicht den Text in der 'Test' div. Ich habe es gerade versucht und wenn ich das Javascript unter dem Div setzen, funktioniert es. Gibt es eine Möglichkeit, es über dem div zu arbeiten, wie ich es gezeigt habe? – David

Antwort

15

Anstatt var1 zu window.onload zuzuweisen, rufen Sie gerade die Funktion auf und speichern das Ergebnis. Auch das könnte offensichtlich sein, aber var1 scheint wie ein seltsamer Name für eine Funktion. Versuchen Sie folgendes:

function var1() { 
    document.getElementById('text').innerHTML = 'hi'; 
} 

window.onload = var1; 

Hinweis das Gehäuse des onload, sowie die fehlenden Klammern nach var1.

+1

sollten Sie nicht innerHTML verwenden es ist nicht Standard und eine schlechte Praxis. Es ist viel sicherer, DOM-Methoden wie createElement, createTextNode und appendChild zu verwenden. –

1

Sie erhalten ein Element mit der ID "test", aber es gibt kein Element mit dieser ID in Ihrem HTML. Es gibt jedoch einen sogenannten "Text".

+0

oh sorry, ich habe behoben, dass ich nicht kopieren und einfügen von meinem Text habe es einfach hier eingegeben, mein schlechtes. aber yeh arbeitet immer noch nicht – David

5

richtig:

window.onload = var1; 

in Ihrem Beispiel Wert von window.onload ist undefined weil Funktion var1 gibt nichts zurück (undefined). Sie sollten die onload-Eigenschaft auf die Funktion var1 setzen, nicht auf das Ergebnis der Funktion var1()

+0

funktioniert immer noch nicht .. – David

+1

@David: Beachten Sie auch die Änderung von onLoad zu onload. Ich habe es versucht und es funktioniert gut. – Guffa

0

Versuchen Sie onLoad auf onload zu ändern.

 
function var1() { 
    document.getElementById('test').innerHTML = 'hi'; 
} 
window.onload = var1; // onload 
+0

Es ist viel sicherer, DOM-Methoden wie createElement, createTextNode und appendChild zu verwenden. –

+0

Sie können überprüfen, dass dadurch das Problem nicht gelöst wird. Sie führen die Funktion vor dem Onload aus, was nicht beabsichtigt ist. – brunoais

+0

@brunoais aktualisiert. Das Problem, auf das ich aufmerksam machen wollte, war das camelCase onload. – johnmdonahue

5

.innerHTML verwendet, ist non-standard, und eine schreckliche Praxis aus vielen Gründen. Sie sollten ein neues Element mit den richtigen Standardmethoden erstellen und es der gewünschten Baumstruktur hinzufügen

+6

Nein. Die Verwendung von 'innerHTML' ist der schnellste Weg. –

+1

bedeutet nicht, dass es keine schlechte Praxis ist –

+3

Es ist nicht Standard, daher kann es zu undefiniertem Verhalten führen, dh: Sicherheitslücken, ist also eine schlechte Praxis. Ich kann nicht glauben, dass jemand das abgelehnt hat ... –

1

Ihr Beispiel funktioniert, wenn Sie in "onLoad" den Großbuchstaben "L" in einen Kleinbuchstaben "L" ändern und entfernen die Klammer nach var1, in der Sie derzeit window.onLoad = var1();

0

Unten ist eine andere einfachere Version

<body> 
 
<div id="test">change</div> 
 
    <script type="text/javascript"> 
 
    document.getElementById('test').innerHTML = 'hi'; 
 
</script> 
 
</body>