Не могу получить кнопку для прокрутки переполнения div с JS

Question

Я изо всех сил пытался заставить кнопку работать, и я попробовал все, что мог придумать, прежде чем спрашивать здесь.То, что я пытаюсь сделать, это получить кнопки слева и справа от div с переполнением, чтобы прокрутить его.Я относительно новичок в веб-интерфейсе и просто изучаю CSS и HTML.Мне также действительно нужно, чтобы он оставался в формате сетки CSS, так как это просто блок для веб-сайта, который я пытаюсь сделать.Также, если возможно, пожалуйста, дайте ответы в виде кода / фрагментов кода.Я уже пытался добавить и вставить JS, но безрезультатно.Я знаю, что это также может быть реализовано с помощью плагина или фреймворка.Однако мне важно понять, почему это не работает, чтобы учиться:)

Вот моя попытка codepen:

function scrolll() {
  var elmnt = document.getElementByClassName("scnd");
  elmnt.scrollLeft += 50;
}

body {
  min-width: 200px;
  /* solution for img overflow */
  border: 3px solid black;
}

.wrapper {
  border: 3px solid red;
  display: grid;
  margin: 5%;
}

.box {
  grid-row-gap: 0.3em;
  display: grid;
  justify-self: center;
  grid-template-rows: 50% 25%;
  grid-template-columns: 1fr 7fr 1fr;
}

.box div {
  border: 1px solid blue;
  max-width: 800px;
}

.box .frst {
  text-align: center;
  display: block;
  grid-column-start: 2;
}

.box .frst img {
  display: block;
  margin: auto;
  max-width: 100%;
}

.scnd {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 2px;
  overflow: auto;
  grid-column-start: 2;
}

.thumb {
  width: 100%;
  text-align: center;
}

.thumb img {
  max-height: 10vw;
}

#left {
  grid-column-start: 1;
}

#right {
  grid-column-start: 3;
}

<div class="content">
  <div class="wrapper">
    <div class="box">
      <div class="frst">
        <img src="https://picsum.photos/800/500/?random">
      </div>
      <button id="left" onclick="scrolll()"><</button>
      <div class="scnd">
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href "#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>

      </div>
      <button id="right">></button>

    </div>
  </div>
</div>

ps дайте некоторое время для загрузки изображений, пожалуйста.

Answer 1

Я видел несколько синтаксических ошибок в вашем коде .. остальное работает нормально

function scrolll () {

var elmnt = document. getElementsByClassName ("scnd") [0];

elmnt.scrollLeft + = 50;}

Я пробовал на codepen.вот ссылка https://codepen.io/shivani137/pen/GdzaxJ?editors=1010

Answer 2

Вот запрошенная скрипка: https://jsfiddle.net/52n8tsvb/

var scrolll = function() {
  var elmnt = document.getElementsByClassName("scnd")[0];
  elmnt.scrollLeft += 50;
}

Проблема заключалась в том, что вы неправильно написали document.getElementsByClassName и обработали вывод как document.getElementByID, document.getElementsByClassName всегда возвращает HTMLCollection, которую вы можете использоватьобращаться с массивом.