Проблема с поиском правильно статьи с помощью селектора - PullRequest
0 голосов
/ 27 апреля 2020

Вы можете мне помочь? что я делаю не так, поэтому я не могу проверить правильность статьи без загрузки страницы. Я пометил эту строку кода как исправимый. Это часть (/ * [FIX THIS ?!] найти правильную статью, используя селектор (значение атрибута 'href') * / const targetArticle = document.querySelector ("href"); console.log ("kliknieto:" , targetArticle);) Заранее благодарю за помощь:

"use strict";

function titleClickHandler(event) {
  event.preventDefault();
  const clickedElement = this;

  /* [DONE] remove class 'active' from all article links  */
  const activeLinks = document.querySelectorAll(".titles a.active");

  for (let activeLink of activeLinks) {
    activeLink.classList.remove("active");
  }
  /* [DONE] add class 'active' to the clicked link */
  clickedElement.classList.add("active");
  console.log("clickedElement:", clickedElement);
  /* [DONE] remove class 'active' from all articles */
  const activeArticles = document.querySelectorAll("article");

  for (let activeArticle of activeArticles) {
    activeArticle.classList.remove("active");
  }
  /* [DONE] get 'href' attribute from the clicked link */
  const articleSelector = clickedElement.getAttribute("href");
  console.log("was clicked:", articleSelector);
  /* [FIX THIS?!] find the correct article using the selector (value of 'href' attribute) */
  const targetArticle = document.querySelector("href");
  console.log("kliknieto: ", targetArticle);
  /* add class 'active' to the correct article */
  targetArticle.classList.add("active");
}

const links = document.querySelectorAll(".titles a");

for (let link of links) {
  link.addEventListener("click", titleClickHandler);
}
@import url("https://fonts.googleapis.com/css?family=Oswald:400,600|Sacramento|Source+Sans+Pro:300&subset=latin-ext");
/* Variables */
/* Global */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Source Sans Pro", sans-serif;
  color: #444;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

.section-title {
  font-size: 22px;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}

.section-title span {
  text-transform: none;
  font-weight: 400;
  color: #777777;
}

/* Layout */
.wrapper {
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
}

.sidebar {
  -ms-flex: 1 0 0px;
      flex: 1 0 0;
}

.posts {
  -ms-flex: 2 0 0px;
      flex: 2 0 0;
}

.sidebar,
.posts {
  background: #fff;
  margin-right: 10px;
  padding: 40px;
  border: 1px solid #444;
  border-radius: 5px;
}

/* Logo */
.logo {
  font-family: "Sacramento", cursive;
  font-weight: 400;
  font-size: 104px;
  line-height: 1;
  text-align: center;
}

/* Lists */
.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.list .active {
  font-weight: bold;
}

.list-horizontal li {
  display: inline-block;
}

/* Authors */
.authors li {
  margin-bottom: 12px;
}

/* Post */
.post {
  display: none;
}

.post.active {
  display: block;
}

.post-author {
  font-style: italic;
}

.post-tags {
  display: -ms-flexbox;
  display: flex;
}

.post-tags p {
  margin: 0 10px 0 0;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
    <meta name="description" content="Small Blog with JavaScript" />
    <meta name="keywords" content="Blog, javaScript, Article" />
    <meta name="author" content="Krzysztof Fila" />
  </head>

  <body>
    <div class="blog">
      <div class="container">
        <h1 class="logo">my blog</h1>
        <main class="wrapper">
          <aside class="sidebar">
            <h2 class="section-title">All posts</h2>
            <ul class="list titles">
              <li>
                <a href="#article-1" class="active"><span>Article 1</span></a>
              </li>
              <li>
                <a href="#article-2" class="active"><span>Article 2</span></a>
              </li>
              <li>
                <a href="#article-3"><span>Article 3</span></a>
              </li>
              <li>
                <a href="#article-4"><span>Article 4</span></a>
              </li>
              <li>
                <a href="#article-5"><span>Article 5</span></a>
              </li>
              <li>
                <a href="#article-6"><span>Article 6</span></a>
              </li>
              <li>
                <a href="#article-7"><span>Article 7</span></a>
              </li>
              <li>
                <a href="#article-8"><span>Article 8</span></a>
              </li>
              <li>
                <a href="#article-9"><span>Article 9</span></a>
              </li>
              <li>
                <a href="#article-10"><span>Article 10</span></a>
              </li>
            </ul>
          </aside>
          <section class="posts">
            <article class="post active" id="article-1">
              <h3 class="post-title">Article 1</h3>
              <p class="post-author">by Marion Berry</p>
              <div class="post-content">
                <p>
                  Duis non dolor efficitur erat interdum fringilla a lobortis
                  dolor. Aenean in massa viverra, pretium augue et, imperdiet
                  diam. Proin varius vitae lectus ut suscipit. Etiam metus
                  lacus, molestie at ante eget, gravida tristique metus. Morbi
                  finibus elit mi, ut aliquam libero tempor eu.
                </p>

                <p>
                  Curabitur a arcu ut nunc ornare tempor. Vestibulum et augue
                  purus. Sed mattis auctor iaculis. Duis placerat tempus nisl,
                  et commodo sem varius sed. Ut ac ultrices leo. Aliquam
                  efficitur augue a scelerisque lacinia. Donec sit amet justo
                  lacus.
                </p>

                <p>
                  Duis tincidunt tellus non lorem molestie lobortis. Ut nec
                  mauris consectetur, convallis nisl vel, venenatis magna. Sed
                  efficitur egestas purus, eu fermentum leo sodales in.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">design</a></li>
                  <li><a href="#">tutorials</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-2">
              <h3 class="post-title">Article 2</h3>
              <p class="post-author">by Theo Tabby</p>
              <div class="post-content">
                <p>
                  Phasellus sollicitudin, arcu vel iaculis ullamcorper, quam leo
                  viverra orci, et faucibus quam sapien vel est. Maecenas ac
                  suscipit elit. Nullam interdum, lorem vitae venenatis
                  pulvinar, ex dui malesuada nunc, tempus cursus enim metus vel
                  nulla.
                </p>

                <p>
                  Integer hendrerit, eros id efficitur dapibus, ante arcu
                  ullamcorper orci, a iaculis felis turpis at purus. Quisque
                  sodales posuere sapien vel consectetur. Duis dui urna, commodo
                  non ante nec, mattis dictum enim. Donec aliquam erat sed diam
                  lobortis, vel gravida lacus laoreet. Phasellus pretium maximus
                  mi, eu posuere justo suscipit vel.
                </p>

                <p>
                  Nam magna nisl, varius in malesuada vitae, facilisis vel
                  metus. Proin rhoncus euismod leo dictum lobortis. Suspendisse
                  non ante sapien.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">news</a></li>
                  <li><a href="#">code</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-3">
              <h3 class="post-title">Article 3</h3>
              <p class="post-author">by George Tuxedo</p>
              <div class="post-content">
                <p>
                  Mauris vel pellentesque turpis, ac sodales nisl. Quisque
                  iaculis mi velit, ut convallis tellus accumsan a. Quisque
                  iaculis, nisi et dignissim tincidunt, nisl eros euismod nulla,
                  finibus laoreet erat enim posuere elit.
                </p>

                <p>
                  Aenean at semper urna. Duis vel sapien molestie, egestas diam
                  consequat, molestie nulla. Praesent a malesuada metus.
                  Praesent et tempus leo.
                </p>
                <p>
                  Mauris in eleifend neque, vitae eleifend velit. Maecenas purus
                  est, bibendum eget imperdiet id, dictum sed ante. Aenean a
                  magna et eros sagittis aliquet.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">news</a></li>
                  <li><a href="#">reviews</a></li>
                  <li><a href="#">design</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-4">
              <h3 class="post-title">Article 4</h3>
              <p class="post-author">by Kitty Toebean</p>
              <div class="post-content">
                <p>
                  Morbi vel cursus nulla, vel varius mauris. Suspendisse sed
                  elit sit amet risus faucibus vestibulum ut sit amet purus.
                  Donec orci est, condimentum ut quam quis, scelerisque
                  fringilla ligula.
                </p>

                <p>
                  Quisque bibendum nisl id quam sagittis, id pretium dolor
                  scelerisque. Suspendisse non odio nec velit dapibus placerat
                  non a libero.
                </p>

                <p>
                  Vivamus at tristique ex, feugiat sagittis ex. Cras cursus,
                  ipsum et efficitur commodo, urna sapien rutrum magna, quis
                  sodales justo ligula eget nunc. In hac habitasse platea
                  dictumst.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">tutorials</a></li>
                  <li><a href="#">code</a></li>
                  <li><a href="#">design</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-5">
              <h3 class="post-title">Article 5</h3>
              <p class="post-author">by Marion Berry</p>
              <div class="post-content">
                <p>
                  Suspendisse sem eros, euismod condimentum arcu ac, consequat
                  fermentum orci. Nam convallis lacus nec interdum vestibulum.
                  Vestibulum luctus, quam eu tristique ornare, lorem nibh
                  sodales enim, vitae tempor dolor ante vitae tortor.
                </p>

                <p>
                  Duis venenatis metus quis luctus lobortis. In porttitor ipsum
                  eget ligula aliquam ornare. Cras malesuada urna id volutpat
                  sodales.
                </p>

                <p>
                  Donec lobortis ultricies turpis, eu viverra magna gravida
                  quis. Fusce sit amet pretium nulla. Duis rutrum metus vel
                  libero sodales, pellentesque varius ex pulvinar.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">design</a></li>
                  <li><a href="#">reviews</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-6">
              <h3 class="post-title">Article 6</h3>
              <p class="post-author">by George Tuxedo</p>
              <div class="post-content">
                <p>
                  Donec posuere iaculis ante sed hendrerit. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Quisque hendrerit neque
                  nec urna tincidunt, quis vehicula dui vulputate. Morbi est
                  sapien, auctor ut lectus eu, placerat viverra lorem.
                </p>

                <p>
                  Cras consectetur at erat id accumsan. Suspendisse lacinia in
                  nulla quis vulputate. Nunc vitae consectetur augue. Nam ut
                  vehicula mi. Aliquam tristique, purus in hendrerit porta, elit
                  lectus finibus mi, vel malesuada nisl lectus a libero.
                </p>

                <p>
                  Nam quis efficitur ante. Sed eget purus quis ex commodo porta
                  eu sit amet dolor. Mauris tellus nisl, dictum nec est vitae,
                  condimentum ornare ante. Fusce ornare hendrerit maximus. In
                  maximus rhoncus justo.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">reviews</a></li>
                  <li><a href="#">code</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-7">
              <h3 class="post-title">Article 7</h3>
              <p class="post-author">by Kitty Toebean</p>
              <div class="post-content">
                <p>
                  Donec eleifend mauris ac nisl fermentum, ac fermentum turpis
                  dignissim. Aliquam diam nisl, imperdiet a varius eget,
                  lobortis sed nisi. Nullam suscipit ipsum sed magna blandit,
                  sed pellentesque urna malesuada.
                </p>

                <p>
                  Duis vestibulum arcu et lectus viverra porta. Praesent tempor
                  lacus eget quam mattis, sit amet venenatis diam ultrices.
                  Morbi gravida sapien quis ligula tincidunt, vel sagittis erat
                  ultrices.
                </p>

                <p>
                  Ut orci tellus, laoreet ac diam ut, tempus bibendum nisi. Nam
                  egestas sagittis nibh. Curabitur tristique dui quis egestas
                  pretium. Duis eu felis orci.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">code</a></li>
                  <li><a href="#">news</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-8">
              <h3 class="post-title">Article 8</h3>
              <p class="post-author">by Theo Tabby</p>
              <div class="post-content">
                <p>
                  Praesent quis imperdiet erat. Curabitur tempor sapien a
                  interdum malesuada. Proin libero erat, sagittis a sollicitudin
                  eget, pulvinar nec risus. Cras et suscipit sem.
                </p>

                <p>
                  Maecenas consequat diam nec sollicitudin congue. Aenean
                  porttitor porttitor quam, condimentum interdum metus congue
                  sed. Donec at nulla ipsum.
                </p>

                <p>
                  Mauris non congue dui. Aenean ac eros vitae massa vulputate
                  aliquet ut ac elit. Morbi iaculis auctor nunc aliquet luctus.
                  Nunc tincidunt sem dui, quis interdum leo pellentesque eget.
                  Fusce id leo varius, imperdiet nunc vitae, tristique mi.
                  Mauris quis interdum justo. Mauris auctor purus eu leo
                  faucibus feugiat. Nulla at odio vitae leo semper blandit.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">news</a></li>
                  <li><a href="#">design</a></li>
                  <li><a href="#">tutorials</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-9">
              <h3 class="post-title">Article 9</h3>
              <p class="post-author">by Marion Berry</p>
              <div class="post-content">
                <p>
                  Tam et facilisis purus. Donec vulputate est quis lobortis
                  posuere. Nunc vitae lorem ut odio faucibus pulvinar nec in
                  justo. Ut ut ante ac tellus ornare tempus. Nunc maximus,
                  tortor et dictum convallis, nunc libero posuere leo,
                  scelerisque ultrices arcu sapien ut tellus.
                </p>

                <p>
                  Fusce lacinia augue massa, non tincidunt tortor auctor quis.
                  Vestibulum ut pretium nisl. Etiam id tellus tempus, commodo
                  ligula vehicula, porta magna.
                </p>

                <p>
                  Donec fringilla blandit dolor vel aliquet. Fusce tortor
                  sapien, lobortis eu vehicula sit amet, dignissim et lectus. In
                  ullamcorper metus vel massa fermentum, at fermentum dui
                  sollicitudin. Nullam lacinia elit vel tortor ullamcorper
                  pulvinar.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">news</a></li>
                  <li><a href="#">tutorials</a></li>
                </ul>
              </div>
            </article>
            <article class="post" id="article-10">
              <h3 class="post-title">Article 10</h3>
              <p class="post-author">by George Tuxedo</p>
              <div class="post-content">
                <p>
                  Aliquam erat volutpat. Ut non eleifend lectus. Donec suscipit
                  tellus tempor, ornare dui id, hendrerit neque. Phasellus
                  lacinia laoreet dui in luctus. Sed hendrerit, magna sit amet
                  varius tempor, augue augue scelerisque est, non scelerisque
                  mauris libero eu sapien.
                </p>

                <p>
                  Sed at sapien in quam sollicitudin aliquam. In interdum metus
                  a mi porttitor luctus. Sed commodo, arcu id lacinia posuere,
                  felis elit pharetra urna, at feugiat est orci sit amet libero.
                  Quisque in nisl est. Nullam vehicula at lectus non luctus.
                  Cras aliquam neque magna, at varius nisi egestas ut.
                </p>

                <p>
                  Rhoncus purus nulla, non auctor lacus placerat ut. Aliquam
                  condimentum eget magna ac gravida. Etiam egestas faucibus urna
                  et finibus. Cras vel tellus vel magna suscipit euismod.
                  Maecenas id arcu ante. Duis iaculis scelerisque erat, at
                  ullamcorper arcu consectetur eu. Fusce aliquam diam at arcu
                  pharetra, vel fermentum nunc lobortis.
                </p>
              </div>
              <div class="post-tags">
                <p><strong>Tags:</strong></p>
                <ul class="list list-horizontal">
                  <li><a href="#">code</a></li>
                  <li><a href="#">design</a></li>
                  <li><a href="#">news</a></li>
                  <li><a href="#">reviews</a></li>
                </ul>
              </div>
            </article>
          </section>
          <aside class="sidebar">
            <h2 class="section-title">Tags</h2>
            <ul class="list tags">
              <li><a href="#">design</a> <span>(6)</span></li>
              <li><a href="#">code</a> <span>(5)</span></li>
              <li><a href="#">tutorials</a> <span>(4)</span></li>
              <li><a href="#">reviews</a> <span>(4)</span></li>
              <li><a href="#">news</a> <span>(6)</span></li>
            </ul>
            <h2 class="section-title">Authors</h2>
            <ul class="list authors">
              <li>
                <a href="#">
                  <span class="author-name">Kitty Toebean</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="author-name">Theo Tabby</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="author-name">George Tuxedo</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="author-name">Marion Berry</span>
                </a>
              </li>
            </ul>
          </aside>
        </main>
      </div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

1 Ответ

0 голосов
/ 27 апреля 2020

у вас ошибка в конце. используйте это

const targetArticle = document.querySelector(articleSelector);

вместо

const targetArticle = document.querySelector("href");
...