В JS Не удается прочитать свойство 'style' для null, но при копировании и вставке кода оно работает нормально - PullRequest
Новая
       5

В JS Не удается прочитать свойство 'style' для null, но при копировании и вставке кода оно работает нормально

0 голосов
/ 11 февраля 2020

Я не уверен, что делаю неправильно, но я получаю сообщение об ошибке в ручке . Я предполагаю, что я просто поставил что-то не в том месте, но помощь и описание того, что я сделал не так, были бы оценены 

  function on() {
  document.getElementById('about').style.display ="block";
}

function off() {
  document.getElementById('about').style.display ="none";
}
.about {
  display: block;
  z-index: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Slab', serif;
  background-color: #ffffff;
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Scaledish</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="shortcut icon" type="image/png" href="https://preview.redd.it/y50x69der7h31.png?width=960&crop=smart&auto=webp&s=9179a708e2b531b3b89eed861c75d04375e6510b" />
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>

<body>
  <script src="script.js"></script>
  <div class="SlideContent">
    <div class="about"
    <div class="home">
      <div class="TxtC">
        <div class="ctxt">
          <div class="TextHead">
            Scaledish 
          </div>
          <div class="TextBodyTW">
            <a onclick='on()'>About</a>
          </div>
        </div>
      </div>
    </div>  
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 11 февраля 2020

Вы используете getElementById, но нет элемента с id = "about"

Ty to: 

<body>
  <script src="script.js"></script>
  <div class="SlideContent">
    <div id="about" class="about">
    <div class="home">
      <div class="TxtC">
        <div class="ctxt">
          <div class="TextHead">
            Scaledish 
          </div>
          <div class="TextBodyTW">
            <a onclick='on()'>About</a>
          </div>
        </div>
      </div>
    </div>  
</body>
</html>
1 голос
/ 11 февраля 2020

Что ж, я вижу там две проблемы:

1 - у вас есть тег, который отсутствует >: 

<div class="about"

2 - Ваш JavaScript ищет элемент с атрибутом id, но ваш div имеет только атрибут class. Вы можете попробовать: 

// Get all elements with the class about, and then go to the first element of the array
document.getElementsByClassName("about")[0];

Но лучший способ - добавить атрибут id в div: 

<div id="about" class="about">
...