Question

我正在服用JavaScript Tutorial（1小时18分钟）。除了在页面上编写属性外，我的HTML文件中的所有内容都有效。

以下是我在撰写课程时正在处理的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>

我仔细检查了代码并将其与视频进行了比较，但我无法发现为什么属性没有写入页面。

请帮我弄清楚为什么不打印。

Answer 1

您的代码中有几处错误。

第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。

纠正这些错误，Page会按预期工作/写入属性。

JavaScript属性不写入页面

1 个答案: