CODEWITHSUNDEEP
javascriptjqueryhtml
RedStarFire
RedStarFire

Reputation: 3

Uncaught TypeError: Cannot set property 'src' of null Image Gallery

Forgive me for my "newbness", I'm not a coder by trade and just code when I have too.

With that said, I'm trying to create an image gallery in our web-based network monitoring tool (SolarWinds NPM) to allow us to view pictures of our equipment at our sites. I'm doing this in a "Custom HTML Resource", which is essentially an iframe.

The gallery should use the title of the parent page as a variable to determine what folder to find the images on the web server.

When I attempt to run the following, I receive an error in the Chrome console that says "Uncaught TypeError: Cannot set property 'src' of null" for line 2 of the JavaScript.

HTML:

<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
</style>
</head>
<body>
<div class="img">
  <a target="_blank" href="">
    <img id="Image1" src="image1.png"  width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image2" src="image2.png" width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image3" src="image3.png" id="Image3" width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image4" src="image4.png" width="300" height="200">
  </a>
</div>
<script src="SiteDBpics\Gallery.js"></script>
</body>
</html>

And here is the JavaScript:

var title = window.parent.document.getElementsByTagName("title")[0].innerHTML;
document.getElementById("Image1").src = "SiteDBpics/" + title + "/image1.png";
document.getElementById("Image2").src = "SiteDBpics/" + title + "/image2.png";
document.getElementById("Image3").src = "SiteDBpics/" + title + "/image3.png";
document.getElementById("Image4").src = "SiteDBpics/" + title + "/image4.png";

Any help would be appreciated!

EDIT1: HTML changed to reflect "A. Wolff"s suggestion.

EDIT2: I found the issue! I had some formatting errors, I forgot some quotes in the HTML portion when declaring the image URLs. I also had to change the file path details in the script as well.

Upvotes: 0

Views: 1758

Answers (1)

Andrew Koper
Andrew Koper

Reputation: 7221

You're missing a second, closing double quote on a target=_blank href=" on line 47. That is throwing your DOM creation off.

Also, you don't have a title tag in your file which your "document.getElementsByTagName('title')[0]" is looking for.

Upvotes: 1

Related Questions