0

I have a JS file with a single line of code, a console log:

console.log(guideImage);

The result of the above code is the element like this:

<img id="guideImage" class="Images" src="img/guide.png">

I expect that I should get an error because I haven't defined the guideImage in the javascript file, Since I haven't selected the image via getElementById or something like that how we still can select the element?

This is confusing me!

In my CSS I have:

.containerGuideImage {
  position: absolute;
  overflow: hidden;
  left: -1vw;
  top: 55vh;
  height: 42vh;
  width: 11vw;
  /*outline: 0.1vw dashed orange;*/
}

#guideImage{
  position: absolute;
  transform: scale(0.5, 0.5); 
  width: 12vw;
  height:65vh;
  opacity: 0;
  top: -18vh;
}

.guideImageShow {
    animation: guideImgShow 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-delay: 0.3s;
    animation-fill-mode: forwards ;
}

.guideImageHide {
    animation: guideImgHide 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes guideImgShow {
  from { opacity: 0; right: 14vw }
  to   { opacity: 1; right: 0vw }
}

@-webkit-keyframes guideImgHide {
   from { opacity: 1; left: 0vw }
   to   { opacity: 0; left: 14vw }
}

And HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body> 

<div class="containerGuideImage">
<img id="guideImage" class="Images" src="img/guide.png"/>
</div>

<script src="script.js"></script>
</body>
</html>
Sara Ree
  • 3,417
  • 12
  • 48
  • You’re asking from a different perspective, but this is answered in the duplicate question: IE in the early days automatically mapped the elements with an `id` to a variable of the same name. Then, for compatibility - and to get rid of the user experience of “this site looks better in Internet Explorer 5” - every other browser followed suit. And then kept doing it for compatibility reasons to avoid breaking the web. Sigh. – David Thomas Jan 10 '20 at 18:49
  • If I have access to the element via ids then why we should use `getElementById`? – Sara Ree Jan 10 '20 at 18:54
  • Because it's an unanticipated global variable that can be easily - deliberately or not - be overwritten elsewhere in the code, or libraries. – David Thomas Jan 11 '20 at 00:19

0 Answers0