HTML JavaScript Function Not Starting

March 31, 2023

My JavaScript Function is not connecting well with my HTML or CSS because its saying that it (Cannot read properties of null (read 'style').

this is the error on VS Code.
error screenshot

I was hoping this would work out in my favor because it is my first time trying something this complex so far. But I’m assuming I have forgotten some kind of loop or not connected my JS to the document well.

Here are the sources for the HTML and CSS I would love for someone to help me out with this bug.

HTML/JavaScript

CSS

I have been trying to re-work the syntax since that is what the error describes but I feel this might be a deeper issue involving the rest of how I have set the script up.

I have also tried to look up this error on here before this but it is all either outdated or not quite the exact problem I am facing.

 <!DOCTYPE html>
<html>
    <head>
     <title>java script testing</title>
     <link rel="stylesheet" herf="new.css">

     <script>
     var showing = true;
   
    
    function checkforshow() {
        if (showing = true) {
            showing = false;
        } else {
            showing = true;
        }
    }
    
    if (showing = true) {
       document.getElementsByTagName("h1").style.opacity = "0";
    } else {
        document.getElementsByTagName("h1").style.opacity = "1";
    }
    
     </script>
    </head>
    <body>
        <button onclick="checkforshow()">Hide Ele</button>
        <h1>Blah Blah</h1>
    </body>
</html>

>Solution :

I think this is what you wanted to do.

First we declare our boolean in false because the title is already visible.

Second we declare the function and we get inside of it the title by its id.

Based on the previous value of the boolean we change the display.

Finally we assign showing to be (not showing).

If this is not what you wanted please let me know 🙂

<!DOCTYPE html>
<html>
  <head>
    <title>java script testing</title>
    <link rel="stylesheet" herf="new.css" />

    <script>
      let showing = false;
      function checkforshow() {
        const title = document.getElementById("title");
        if (showing == true) {
          title.style.display = "block";
        } else {
          title.style.display = "none";
        }
        showing = !showing;
      }
    </script>
  </head>
  <body>
    <button onclick="checkforshow()">Hide Ele</button>
    <h1 id="title">Blah Blah</h1>
  </body>
</html>