Question

我的JavaScript和CSS都给我带来了问题。每当我运行html时，它都说我的两个文件都有错误，但是我找不到它们。它给我的错误是

未捕获的TypeError：无法在file.js：4上将属性'innerHTML'设置为null

Assign6.css：2未捕获的语法错误：意外的令牌'{'

HTML：

<!doctype>
<html lang = "en">
    <head>
        <meta charset="utf-8">
        <script src="file.js"></script>
        <script src="file.css"></script>
    </head>
    <body>
        <h2 id="ch"></h2>
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="demo"></p>
    </body>
</html>

JavaScript：

//set use strict
'use strict';
//1. populate the paragraph with text using the getElementById - method and innerHTML- property
document.getElementById('p1').innerHTML = "Good Morning Students";

//2. let's do the same with query selector ( create another paragraph to HTML)
document.querySelector('#p2').textContent = "Chapter 14";

//3. Change the style of the p1 and h2 (ID="ch" for h2) using the getElementsById
document.getElementById('p1').style.color = "red"
document.getElementById('p1').style.fontFamily = "Arial"
document.getElementById('p1').style.fontSize = "larger"
document.getElementById('ch').style.color = "blue";

//4. add another paragraph at the end of the body
var x = document.createElement("p");
var t = document.createTextNode("This is the paragraph that we added at the end");
x.appendChild(t);
x.setAttribute("class", "ch");
document.body.appendChild(x);

//5. add another pharagraph above the first paragraph.
var y = document.createElement("p");
var k = document.createTextNode("This is the paragraph that we added at the beginning");
y.appendChild(k);
y.setAttribute("id", "p4");
var child =document.getElementById('p1');
document.body.insertBefore(y, child);

//6. alert what we have in the body element
alert(document.body.innerHTML);

//7. alert what we have in the whole document
alert(document.documentElement.innerHTML);

//8. getting the elements by Tag Name
var z = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 'The text in the second paragraph (index 1) is:'
+z[1].innerHTML;

// using querySelector and class “ch” to h2 to change the background color
document.querySelector(".ch").style.backgroundColor = "lightblue";

//9. insert a table with 2 rows and 3 cells
//create table element
var a = document.createElement("table");
a.setAttribute("id", "myTable");
document.body.insertBefore(a, x);

// create the first row
var b = document.createElement("tr");
b.setAttribute("id", "myTr");

// add the first raw to the table
document.getElementById("myTable").appendChild(b);

// create the first cell
var c = document.createElement("td");
var m = document.createTextNode("Name");
c.appendChild(m);

// add the first cell to the first row
document.getElementById("myTr").appendChild(c);

// add another cell
var d = document.createElement("td");
var n = document.createTextNode("Student ID");
d.appendChild(n);
document.getElementById("myTr").appendChild(d);

// add another cell
var f = document.createElement("td");
var k = document.createTextNode("Grades");
f.appendChild(k);
document.getElementById("myTr").appendChild(f);

// add another row (second row)
var b1 = document.createElement("tr");
b1.setAttribute("id", "myTr1");
document.getElementById("myTable").appendChild(b1);
var c1 = document.createElement("td");
var m1 = document.createTextNode("Diana Nano");
c1.appendChild(m1);
document.getElementById("myTr1").appendChild(c1);
var d1 = document.createElement("td");
var n1 = document.createTextNode("23897654");
d1.appendChild(n1);
document.getElementById("myTr1").appendChild(d1);
var f1 = document.createElement("td");
var k1 = document.createTextNode("A");
f1.appendChild(k1);
document.getElementById("myTr1").appendChild(f1);

CSS：

table, th, td {
border: 1px solid black;
}

table {
border-collapse: collapse;
}

是什么导致这些空错误

0 个答案: