未寫入頁面的JavaScript屬性

-3

我正在使用JavaScript Tutorial（1小時18分鐘）。除了在頁面上寫入屬性之外，我的HTML文件中的所有內容都可以工作。未寫入頁面的JavaScript屬性

以下是從我的HTML文件的摘錄我的工作，而以下過程：

<!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>

我仔細檢查了代碼，它相比於視頻，但我看不出爲何屬性不寫入頁面。

請幫我找出爲什麼這不是打印。

來源

2016-09-29 host_255

應該發生什麼？那是什麼不工作？ –

您是否期望人們觀看教程以瞭解應該如何工作？請提供預期的和實際的輸出，因此更容易爲您提供幫助。 –

我不能相信在2015年創建的教程使用'document.write'！我的天啊！！！這是涵蓋一些HTML5更改的更新版本 –

你的代碼中有幾個錯誤。

行號60第一個錯誤：

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

數組索引從0開始，而不是從1所以，正確的代碼將

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

二：你聲明的變量名nttLogo2但嘗試在第87行訪問nttlogo2。

更正這些錯誤，頁面將按預期工作/寫入屬性。

來源

2016-09-29 06:24:13

謝謝@PradeepPotnuru –

未寫入頁面的JavaScript屬性

回答

相關問題