Both my javascript and css are giving me problems. Whenever I run my html, it says the both my files have errors, but I am unable to find them. the errors it gives me is
Uncaught TypeError: Cannot set property 'innerHTML' of null at file.js:4
Assign6.css:2 Uncaught SyntaxError: Unexpected token '{'
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;
}
