2016-10-10 3 views
2

wie der Titel sagte und ich lerne Javascript und noch ein Anfänger.
Dies ist die HTML-Datei hier:Text wird nicht angezeigt mit innerText oder innerHTML

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery</title> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
</head> 
<body> 
    <h1 class="menu"></h1> 
    <script type="text/javascript"> 
    function clr(o){ 
    var a1 = []; 
    var i = 0; 
    for (var k in o){ 
     a1[i] = 0; 
     i++; 
    } 
    return a1; 
    } 
    console.log(clr({a:"a", b:"b", c:"c"})); 
    document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"}); 
    </script> 
</body> 
</html> 
+0

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – Andreas

+0

es sich einfach testen und mir sagen, was das Problem ist, die Seite noch leer! –

Antwort

1

Da Sie JQuery laufen Sie Jquery-Methode verwenden können. wie text() oder html()

Aber das Problem ist, dass document.getElementsByClassName("menu") eine HTML-Sammlung zurückkehren, so dass Sie zu tun haben: document.getElementsByClassName("menu")[0].innerHTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>jQuery</title> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
</head> 
 
<body> 
 
    <h1 class="menu"></h1> 
 
    <script type="text/javascript"> 
 
    function clr(o){ 
 
    var a1 = []; 
 
    var i = 0; 
 
    for (var k in o){ 
 
     a1[i] = 0; 
 
     i++; 
 
    } 
 
    return a1; 
 
    } 
 
    console.log(clr({a:"a", b:"b", c:"c"})); 
 
    $(".menu").text(clr({a:"a", b:"b", c:"c"})); 
 
    </script> 
 
</body> 
 
</html>

1

document.getElementsByClassName("menu") wird ein Array-ähnliche NodeList von Elementen zurück, die enthält die Klasse menu.

Da es sich um ein Array-artiges Objekt handelt, müssen Sie mit [] auf einzelne Elemente zugreifen.

In Ihrem Fall wird es ein Array von 1-Element sein, das h1 Element, so dass es für den Zugriff müssen Sie es an Position 0 greifen:

document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"}); 
----------------------------------------^ 
1

I edited ein Paar mit einem Dinge. Du warst nah. Ich gab der h1 eine ID. Und benutzte document.getElementById.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>jQuery</title> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
</head> 
 
<body> 
 
    <h1 id="menu"></h1> 
 
    <script type="text/javascript"> 
 
    function clr(o){ 
 
    var a1 = []; 
 
    var i = 0; 
 
    for (var k in o){ 
 
     a1[i] = 0; 
 
     i++; 
 
    } 
 
    return a1; 
 
    } 
 
    console.log(clr({a:"a", b:"b", c:"c"})); 
 
    document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"}); 
 
    </script> 
 
</body> 
 
</html>