Accessing DOM element on page 110 is returning a null value

Frontend Web Development: The Big Nerd Ranch Guide Chapter 6: Handling Events with JavaScript
1

document.querySelector(DETAIL_IMAGE_SELECTOR); …returning “null” value when trying to access DOM element in the console for exercise on page 110.

I’ve quadruple checked my code and more for at least 24 hours now and I’m still not sure why the console is returning a “null” value.

Any help is most appreciative…I’d love to keep moving on in the book.

THANK YOU!

2

Well nevermind everyone…happy to say that I found my error! ty!

3

@ericorlang80 Hurray! :tada:

4

Too bad you didn’t say what the error was, could have been suggestive - I have the same problem.

Referring to Figure 6.11 and entering into the Chrome console:

DETAIL_IMAGE_SELECTOR
<-“[data-image-role=“target”]”
document.querySelector(DETAIL_IMAGE_SELECTOR);
<-null

What might be the cause of this – this also at the root of my issues later on at page 118-119 where the JS code fails because of null values. I’ve seen comments elsewhere that suggests the DOM is not executed in the right order somehow?

Any help/suggestions is appreciated.

-Mark

1 Like
5

Hi,

The error lies in the HTML doc. The book reads:

<div class="detail-image-container">
  <div class="detail-image-frame">
    <img class="detail-image" data-image-role="target" src="img/otter1.jpg" alt="">
    <span class="detail-image-title" data-image-role="title" >Walker Tower</span>
  </div>

The issue lies in the span row: data-image-role should be data-image-title

This worked for me:

<div class="detail-image-container">
  <div class="detail-image-frame">
    <img class="detail-image" data-image-role="target" src="img/otter1.jpg" alt="">
    <span class="detail-image-title" data-image-title="title" >Walker Tower</span>
  </div>
6

The second issue I have run into this chapter is with Figure 6.20

When entering into the console, I cannot get - imageFromThumb(firstThumbnail);
to return "img/otter1.jpg"

  1. Do I need to add a var for “firstThumbnail”?
  2. Where did ‘firstThumbnail’ come from?
  3. I tried creating a var for ‘firstThumbnail’ or even adding my own label for a var, but it still will not work
  4. If you do have to create a var for this to work, it is really confusing how the book lays that out.

4 - continued) the example given for the previous Figure 6.19 is:

var otterOneImage = ‘img/otter1.jpg’;
var otterOneTitle = ‘Stayin’ Alive’;

set details(otterOneImage, otterOneTitle);

then for 6.20 returning values from functions:

firstThumbnail is all of the sudden introduced.

  1. I think it would be really helpful if you included all of the code associated with the project at the end of chapters to reference

Please help, I cannot get to the next step without clearing this up

7

Thanks Ty - will review! -mark

8

I was also confused by “firstThumbnail”. Is it a variable? A parameter? What?

To get to the point - I can’t get it expected output.

Is there a file with the js code somewhere?

Carnold