Javascript-форум - Выбор элементов по классу

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выбор элементов по классу (https://javascript.ru/forum/misc/78937-vybor-ehlementov-po-klassu.html)

Выбор элементов по классу

Помогите найти ошибку Нужно выбрать все <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";
}

Цитата:

Сообщение от dimas_77

Помогите найти ошибку Нужно выбрать все <p> и присвоить им класс .bodyCopy который находится в CSS документе не пойму где ошибка в скрипте

Скрипт должен выглядеть в таком случае так…

for(const p of document.querySelectorAll("p.elem")) {
	p.className = "bodyCopy";
}

А в вашем варианте вы допустили ошибку в названии переменной — nodelist, nodeList. Проверьте!

Lycka till!

Malleys,

Цитата:

Сообщение от dimas_77

и присвоить им класс

не заменить :lol:
потролю как любишь сам

Цитата:

Сообщение от Poznakomlus

не заменить

Так что теперь будет Специальная Олимпиада по каким-то не кому не нужным доказательствам? Мой комментарии был отредактирован спустя 5 минут, и ты даже представить себе не можешь что там было изначально написано! Читай внимательно сообщение №1.

dimas_77,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от Malleys (Сообщение 516118)

Скрипт должен выглядеть в таком случае так…

for(const p of document.querySelectorAll("p.elem")) {
	p.className = "bodyCopy";
}

А в вашем варианте вы допустили ошибку в названии переменной — nodelist, nodeList. Проверьте!

Lycka till!

Спасибо все получилось но мой вариант так и не заработал после исправлений

Если не сложно такой еще вопрос теже данные но нужно создать ссылки на основе элементов навигации <li> и его текста поэтому <li class = "navigation"> HTML </ li> следует изменить на

<li class = "navigation> <a href="#HTML"> HTML </a> </ li> и т. д. для трех элементов <li>.

dimas_77,
а подумать самому используя пример выше ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<ul>
    <li class = "navigation"> HTML </li>
    <li class = "navigation"> HTML </li>
    <li class = "navigation"> HTML </li>

</ul>
 <script>
for(const li of document.querySelectorAll("li.navigation")) {
    let txt = li.textContent;
    li.innerHTML = `<a href="#${txt.trim()}">${txt}</a>`
}

</script>
</body>
</html>

Спасибо за помощь и пардом за глупые вопросы я только начинаю изучать js и не все сразу понятно

разьясните что не так с этим скриптом?

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";
}

x = document.getElementById("lista1") - это будет 1 объект, а значит x.length это уже не логично. А lista = document.querySelector("#lista1").children, это коллекция и сразу всем присвоить стиль нельзя, тем более так: lista(i%2).document.style, это неверно. Но и не нужно, это лучше прописать в CSS.

нужно все сделать в js т.е поменять стиль через один <li>