JavaScript-Attribute nicht auf Seite schreiben

-3

Ich nehme eine JavaScript Tutorial (1 Stunde 18 Minuten). Alles in meiner HTML-Datei funktioniert, außer dass die Attribute auf der Seite geschrieben werden.JavaScript-Attribute nicht auf Seite schreiben

Die folgende Text ist ein Auszug aus meiner HTML-Datei, während ich arbeite nach dem Kurs:

<!doctype html> 
<html lan="en"> 
    <head> 
     <meta charset="utf-8"> 

     <style type="text/css"> 
      body {font-size: 1.6em;} 
      .hidden {display:none;} 
      .show {display:inLine !important;} 
      button { 
      border: 2px solid black; background: #ESE4E2; 
      font-size: .5em; font-weight: bold; color: black; 
      padding: .8em 2em; 
      margin-top: .4em; 
      } 
     </style> 

    </head> 
    <body> 

     <div id="sampDiv"><p>Lorem ipsum dolor sit amet, <em>consetetur sadipscing</em> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <b>sed diam nonumy</b> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo <em>duo dolores et</em> ea rebum. <b>Stet clita kasd gubergren</b>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div> 

    <img src="ntt-logo.png" id="logo2" alt="NIT Logo" height="180" width="180"><br /> 

    <button id="goToGoogle">Go to Google</button><br /> 

    <button id="forwardPage">Forward Page</button><br /> 

    <button id="backPage">Back Page</button></br /> 

    <button id="reload">Reload Page</button><br /> 

    <script> 

    document.write("Current URL : ", window.location.href, "<br />"); 

    document.write("Current HOST : ", window.location.hostname, "<br />"); 

    document.write("Current Path : ", window.location.pathname, "<br />"); 

    document.getElementById('goToGoogle').onclick = function(event) 
    {window.location.href = "http://google.com"} 

    document.getElementById('forwardPage').onclick = function(event){ 
     history.forward(); 
    } 

    document.getElementById('backPage').onclick = function(event){ 
     history.back(); 
    } 

    /*var backTwo = history.go(-2); // go back 2 
    var forwardTwo = history.go(2)// go forward 2 
    console.log("backTwo : ",backTwo,"<br />"); 
    console.log("forwardTwo : ",forwardTwo,"<br />");*/ 

    document.getElementById('reload').onclick = function(event){ 
     window.location.reload(true); 
    } 

    var pElements = document.getElementsByTagName('p'); 
    pElements[1].style.backgroundColor = 'red'; 
    pElements[2].style.backgroundColor = 'blue'; 

    document.childNodes[1].style.backgroundColor = "#FAEBD7"; 

    var sampDiv2 = document.getElementById('sampDiv'); 

    sampDiv2.childNodes[0].style.backgroundColor = "#F0FFFF"; 

    sampDiv2.childNodes[0].childNodes[1].style.backgroundColor = "#BFAFB2"; 

    // JavaScript gets confused about text nodes or white space 
    // You can get rid of text nodes by eleminating white space or using child nodes 
    // If you deltee all of the white space, you can use lastChild and firstChild on any browser without issues; however, it is just as efficient targeting id's and nodetype 

    document.write("Node Type : ", sampDiv2.childNodes[0].childNodes[0].nodeType, "<br />"); 

    document.write("Node Name : ", sampDiv2.childNodes[0].childNodes[0].nodeName, "<br />"); // gets #text for text node 

    document.write("Node Name : ", sampDiv2.childNodes[0].childNodes[1].nodeName, "<br />"); // gets EM for the <em></em> emphasize node type 

    // Nothing prints to the browser after this point. 

    var nttLogo2 = document.getElementById('logo2'); 

    document.write("Logo has alt : ", nttlogo2.hasAttribute("alt"),"<br />"); 

    nttLogo2.setAttribute("alt", "NTT Logo2"); 

    document.write("Logo alt value : ", nttLogo2.getAttribute("alt"), "<br />"); 

    var attribList = document.getElementById('logo2').attributes; 

    for(i=0;i<attribList.length;i++){ 
     document.write("Attribute ", i, " : ", attribList[i].nodeName, " : ", attribList[i].nodeValue, "<br />"); 
    } 

    </script> 


    </body> 
</html>

ich den Code sorgfältig geprüft und stellen Sie das Video verglichen, aber ich kann nicht erkennen, warum die Attribute nicht sind Schreiben auf die Seite.

Bitte helfen Sie mir herauszufinden, warum dies nicht gedruckt wird.

Quelle

2016-09-29 host_255

Was soll passieren? Was funktioniert das nicht? –

Erwarten Sie, dass die Leute das Tutorial sehen, um herauszufinden, wie das funktionieren soll? Bitte geben Sie die erwartete und die tatsächliche Ausgabe an, so dass es einfacher ist, Ihnen zu helfen. –

Ich kann nicht glauben, dass ein 2015 erstelltes Tutorial 'document.write' !! OH MEIN GOTT!!! Es ist die aktualisierte Version, um einige HTML5-Änderungen zu behandeln –

Es gab einige Fehler in Ihrem Code.

Erste Fehler in Zeile Nummer 60:

var pElements = document.getElementsByTagName('p'); 
    pElements[1].style.backgroundColor = 'red'; 
    pElements[2].style.backgroundColor = 'blue';

Array-Index beginnt bei 0, nicht von 1. Also der richtige Code wäre

var pElements = document.getElementsByTagName('p'); 
    pElements[0].style.backgroundColor = 'red'; 
    pElements[1].style.backgroundColor = 'blue';

Zweitens: Sie deklarierte Variable Name nttLogo2 aber versucht Zugriff auf nttlogo2 in Zeile 87.

Korrigieren Sie diese Fehler, Seite würde arbeiten/schreiben Attribute wie erwartet.

Quelle

2016-09-29 06:24:13

Danke @PradeepPotnuru –

JavaScript-Attribute nicht auf Seite schreiben

Antwort

Verwandte Themen