When using JavaScript, an error may occur that says "Cannot read property 'style' of null," but strangely, this issue disappears when the code is copied and

I seem to be encountering an error in my codepen and I can't figure out what I'm doing wrong. It appears that I may have misplaced something, but I would greatly appreciate any help or explanation of my mistake.

  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>

javascripthtmlcssnullsyntax-error

Answer №1

The error message indicates that you are using getElementById with the id "about" which does not correspond to any element in the document.

To fix this issue, you can try the following code snippet:

<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>

Answer №2

Upon closer inspection, I have identified two issues:

1 - An open tag lacking the closing >:

<div class="about"

2 - The JavaScript code is searching for an element with an id attribute, yet the div only has a class attribute. A possible solution is:

// Retrieve all elements with the class about, then select the first element of the array
document.getElementsByClassName("about")[0];

However, the optimal approach is to assign an id attribute to the div:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resetting the state back to its initial value - which one to use: useState or useReduce?

In order to enhance the functionality of a third-party Authentication service Auth0's useAuth0 hook, I have developed a custom hook called useAuth. This custom hook is responsible for managing local variables that store essential user information like ...

javascriptreactjstypescriptreact-hooks

Check the File Format (not just the Extension) prior to Uploading

When uploading a file within an HTML form, you can validate the extension using JQuery's Validation plugin: <form enctype="multipart/form-data" id="form-id"> <input type="file" name="file-id" id="file-id" /> </form> To validate ...

javascriptphpjqueryhtmlupload

What are the steps to leverage npm installed packages in my .js files?

I'm new to web development and I'm trying to incorporate node packages into my workflow. Specifically, I'm attempting to test out the axios ajax library. It seemed like this would be a simple task, but it's proving to be quite challeng ...

javascriptnpm

Angular and JavaScript Performing Slide-Up Animation

Currently, I am working on creating a menu using Angular and JavaScript. My goal is to have this menu toggle between showing and hiding when a button is clicked. If you would like to view the code that I have written so far, you can check out the demo her ...

javascriptjqueryangularjquery-ui

Is it possible to use CSS to target the nth-child while also excluding certain elements with

How can I create a clear break after visible div elements using pure CSS? Since there isn't a :visible selector in CSS, I attempted to assign a hidden class to the div elements that should be hidden. .box.hidden { background: red; } .box:not(.hid ...

jquerycss

Save a JSON object from a URL into a JavaScript variable using jQuery

I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...

javascriptjqueryjson

TS2688 Error: Type definition file for 'tooltip.js' not found

Why am I getting an 'undefined' error when trying to import the Tooltip class from the npm tooltip.js package in my TypeScript file? ...

javascripttypescriptnpm

Interactive rotating display with constantly updating information

Recently I started learning angularJS and I must say, I am already hooked. I have developed a website that pulls data from JSON files (created by external scripts) locally to show real-time information on various pages. Now, I want to include a sliding car ...

javascriptjqueryangularjstwitter-bootstrapcarousel

Ways to prevent modal from flickering during event changes

I'm struggling with a current issue and need help identifying the cause and finding a solution. The problem arises from having a nested array of Questions, where I display a Modal onClick to show Sub questions. However, when clicking on the Sub Quest ...

javascriptreactjs

Kudos to the information provided in the table!

My JSON data is structured like this: { description : "Meeting Description" name : "Meeting name" owner : { name: "Creator Name", email: "Creator Name" } } I want to present the details in a table format as follows: Meeti ...

javascriptreactjsreact-table

Tips on creating a search query with date condition in the format of M/D/YYYY and stored as a string

In my collection, I have two fields structured like this: { "StartDate" : "1/2/2019", "EndDate" : "5/14/2019" } I need to write a find query to retrieve documents within the current date range. For example: db.collection.find({StartDate:{$lte: &a ...

javascriptnode.jsmongodb

"The process of updating a div with MySQL data using Socket.io on Node.js abruptly halts without any error message

Embarking on a new project using socket.io has been quite the learning experience for me as a beginner. Despite extensive research, I managed to reach the desired stage where I have divs dynamically populated with data fetched from MySQL. In my server.js f ...

javascriptjquerymysqlnode.jssocket.io

"Share your social media profiles without redirecting users to new tabs

Currently in the process of launching my own website using the free Portra theme. So far, everything has been going smoothly with this widget free template. However, I have encountered an issue with my social links opening in the same window. I would prefe ...

htmlwordpress

What is the best method for removing table rows with a specific class?

I have an html table with several rows, and for some of these rows the class someClass is applied. My question is: How can I delete the rows that have a specific class? <table> <tr class="someClass"> ...</tr> <tr class="someClass"> ...

javascriptjqueryhtml

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

Capture Your Scene with Three.js

I am facing an issue where I need to capture a screenshot of a website. I have tried using html2canvas and it is working fine. However, the problem arises because I am using both THREE.WebGLRenderer and THREE.CSS3DRenderer (for HTML in webGL). The screen ...

javascriptthree.jsscreenshothtmlhtml2canvas

Transform the checkbox selection into an active hyperlink upon being selected

Currently, I am in the process of designing a form that allows visitors to select items they would like to view by checking relevant checkboxes. Upon clicking a Request button, the URLs of the selected items are displayed. I aim to have the URL appear as ...

javascripthtmlformsrequest

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

(Snippet: http://jsfiddle.net/qdP3j/) Looking at this HTML structure: <div id="addContactList"></div> There's an AJAX call that updates its content like so: <div id="<%= data[i].id %>"> <img src="<%= picture %&g ...

javascriptjqueryhtml

Simplest Method to Update Content of 'DIV' Across Entire Website Simultaneously

Some DIVs on a website are typically static... For example, the footer of a page is usually consistent and should remain the same on all pages. In a website's CSS, you may have the following: .FooterDIV { Background: #FFFFFF; Color: #0000 ...

phpcsshtml

Utilizing Axios recursion to paginate through an API using a cursor-based approach

Is there a way to paginate an API with a cursor using axios? I am looking to repeatedly call this function until response.data.length < 1 and return the complete array containing all items in the collection once the process is complete. Additionally, I ...

javascriptnode.jsrecursionaxios