Помогите найти ошибку Нужно выбрать все <p> и присвоить им класс .bodyCopy который находится в CSS документе непойму где ошибка в скрипте
<!DOCTYPE html>
<html>
<head>
<title>DOM övning</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700%7CLora" rel="stylesheet" type="text/css">
<link href="domovn.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<main>
<nav>
<ul>
<li class="navigation"><a href="#HTML">HTML</a></li>
<li class="navigation"><a href="#DOM">DOM</a></li>
<li class="navigation"><a href="#Javascript">Javascript</a></li>
</ul>
</nav>
<section id="HTML">
<h1>HTML</h1>
<p class="elem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut orci odio. Praesent rutrum erat diam, ac faucibus ligula ullamcorper a. Sed luctus commodo ante, id tristique purus placerat nec. Duis imperdiet odio neque, nec condimentum diam vehicula vel. Quisque auctor id urna iaculis suscipit. Vestibulum pellentesque luctus felis, eu laoreet nisi cursus nec. Nullam sed nibh libero. Fusce nec nulla non nisl ultrices vestibulum eu eget quam. Aliquam rhoncus scelerisque nunc vel condimentum. Phasellus eget arcu vel purus vestibulum sollicitudin sagittis non elit. Mauris felis neque, congue a augue eget, scelerisque rhoncus arcu. Sed volutpat lacus vel lorem viverra, quis tempor nisl cursus.</p>
<p class="elem">Ut semper efficitur dolor, lacinia aliquet risus semper sed. Sed vel tortor est. Suspendisse et iaculis elit. Praesent vel bibendum nunc, in efficitur purus. Donec dapibus molestie risus, ut facilisis tellus vulputate et. In ac viverra felis, a venenatis ligula. Cras eu massa sed augue pulvinar luctus et a mauris. Pellentesque porttitor in eros maximus tincidunt. Mauris sed ex quis nisl finibus pellentesque. Integer a mauris et nunc vulputate ultrices. Duis a dolor sit amet augue condimentum facilisis et sit amet nibh. Integer vitae aliquet mi. Integer lacinia purus et sapien egestas, a dictum eros volutpat. Sed fringilla pulvinar ante quis vestibulum. Sed dictum, ligula at venenatis condimentum, augue leo dapibus tellus, vel ultrices arcu dolor et orci. Nunc dapibus sem mi, quis porta diam porta at.</p>
<p class="elem">Praesent pretium, ex eget varius mollis, massa dui porttitor turpis, a ultricies odio sapien eget augue. Phasellus eros ipsum, molestie id elit at, pretium pulvinar sem. Nam eu ante elit. Phasellus rutrum, mi non tristique commodo, mauris velit ornare turpis, sit amet congue nunc orci nec orci. Nullam eu lorem id justo maximus dictum. Etiam non nulla vitae ligula pellentesque ultricies. Integer ante enim, dictum eget faucibus non, vestibulum eget mi. Mauris sit amet urna erat. Morbi nec libero iaculis, dapibus metus vitae, consectetur nibh. Donec varius, massa sit amet pellentesque dignissim, arcu justo eleifend erat, a porta augue elit sed enim. Vestibulum iaculis mattis elit vel efficitur.</p>
</section>
<section id="DOM">
<header>
<h2>DOM</h2>
</header>
<article class="DOM-flex">
<h3>Lista 1</h3>
<ul id="lista1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</article>
<article class="DOM-flex">
<h3>Lista 2</h3>
<ul id="lista2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</article>
</section>
<footer id="Javascript">
<p id='demo'>Den här sidan är för övningen DOM och javascript på NTIskolan.</p>
</footer>
</main>
</div>
<script src="domovn.js">
</script>
</body>
</html>
JS script
var nodelist = document.getElementsByClassName("elem");
for (var i = 0; i < nodelist.length; i++) {
nodeList[i].className = 'bodyCopy';
};
document.getElementById("demo").className = 'footerp';
CSS
body, p, h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Lato, sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
h1 {
font-size: 2.5em;
color: #37474f;
padding-left: 0.2em;
}
h2 {
color: #455a64;
font-size: 1.5em;
}
h3 {
color: #455a64;
font-size: 1.5em;
padding-left: 0.5em;
}
.container {
display: flex;
height: 100vh;
}
main {
width: 800px;
height: 100vh;
margin: auto;
}
nav {
height: 2em;
line-height: 2;
background-color: #cfd8dc;
}
nav ul {
font-weight: 700;
list-style: none;
margin-left: 0;
padding-left: 0;
}
nav .navigation {
display: inline;
padding-left: 0.4em;
color: #37474f;
font-weight: 700;
text-decoration: none;
}
.bodyCopy {
font-family: 'Lora', serif;
padding-top: 1em;
}
footer {
height: 4em;
background-color: #455a64;
}
.footerp {
font-family: 'Lato', sans-serif;
padding-left: 1em;
color: #eceff1;
font-size: 0.75em;
line-height: 3;
}
#DOM {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 1em;
}
#DOM header {
flex: 1 100%;
border-bottom: 1px solid #eceff1;
}
.DOM-flex {
flex: 2 auto;
}
---------------------------------------------
разьясните что не так с этим скриптом?
var x = document.getElementById("lista1");
var lista = x.querySelectorAll("li");// [ <li>, <li>.... ]
var lista = document.querySelector("#lista1").children;
for (var i = 0; i < x.length; i++) {
lista(i%2).document.style="red";
}
