未写入页面的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属性

回答

相关问题