2

The logic is to check the url of the CSS element's id(.boot). If the url matches, which it does, then it prints hello world. But it doesn't do anything and I don't know why.

Context: There's a button. I click it. It checks the CSS background url. If the url matches it creates an alert.

CSS:

.boot {
    width: 1000px;
    height: 1000px;
    background-image:url(Videos/printgifstart.GIF);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: fixed;
    bottom: -150px;
    right: 105px;
    z-index: 100;
}

HTML + Javascript

<div class="Logo2" id="blogo">
<h1></h1>
<div class="MirroredSmiles"></div>
<button id="ticketb" class="ticketb"
    style="height:100px;
        width: 75px;
        position: fixed;
        top: 335px;
        left: 200px;
        opacity: 0%;"
        onclick="tixbPLS">
</button>

    <script>
        var tix = document.getElementsByClassName('ticket');
        var tixb = document.getElementById('ticketb');
        var tixc = document.getElementById('ticketc');
        var sart = document.getElementById('shopdrawing');
        var sart2 = document.getElementById('shopdrawing2');
        var sart3 = document.getElementById('shopdrawing3');
        var sbakdo = document.getElementById('backdoor2');

        tixb.addEventListener('click', tixbPLS);

        function tixbPLS() {
            if (document.getElementById('boot').style.backgroundImage = url('Videos/printgifstart.GIF'))
            {
                alert("hello! world!");
            }
        }
    </script>
</div>

I looked online and the issue seemed to lean into a syntax error but I have played with the syntax for hours and it cannot print hello world.

I thought maybe this only works with images and even with an image still no luck.

I tried "=" or "==" still no luck.

I thought maybe somehwere in the code something else is the issue. So instead of the original if statement. I did a math equation type if statement and the alert worked perfectly.

So everything else is fine except for that singular if line.

demontheif
  • 25
  • 3
  • First, use `===`. Second, `url()` is not a function; you probably meant to use `'url(Videos/printgifstart.GIF)'` (in string). Third, `.style` [only gives you access to *inline* styles](https://stackoverflow.com/q/1193409). Finally, learn how to use [a debugger](https://stackoverflow.com/q/25385173), which, in this particular case, is DevTools. – InSync Apr 14 '23 at 22:54
  • Show us the implementation of the DOM element with the boot ID. Note you're referencing a #boot ID but defining the background in a .boot class instead. – DeDee Apr 14 '23 at 23:34
  • I'm sure everyone can tell I'm an absolute noob. So thanks for everything you say as it give me a direction to research. Debug is clearing my head rn so much. Also holy shiz I didn't even realize I was making that mistake with referencing boot like that's not an ID oh my. I've been doing a lot of image and video adding I guess my brain kinda farted. – demontheif Apr 15 '23 at 00:21

2 Answers2

1

You can reference the style sheet rules using the CSSStyleSheet API. Read the article on MDN and it will explain in full detail the example I have below => document.styleSheets[0].cssRules[0].style.backgroundImage.

NOTE: using your browsers console dev tools can really assist you with figuring these things out. Querying the document.styleSheets in your console will return the style sheet object and allow you to really get a visual on the objects make up and how it is constructed, then you can tailor your code to get the results you are looking for.

For Example, if I add console.log(document.styleSheets) to your JS code, it will produce the following object in the console Dev tools.

  "0": {
    /**id:2**/
    "ownerRule": null,
    "cssRules": {
      /**id:3**/
      "0": {
        /**id:4**/
        "selectorText": ".boot",
        "style": {
          "0": "width",
          "1": "height",
          "2": "background-image",
          "3": "background-repeat-x",
          "4": "background-repeat-y",
          "5": "background-size",
    ...

We have an object here. The first iteration of that object 0 has a cssRules object nested, the first iteration of that object has a style object, which is where the style background-image resides. So the following line of code will retrieve that data from the style sheet ==> document.styleSheets[0].cssRules[0].style.backgroundImage

Also, remember = is setting or assigning something, where as == and === is comparative, the later being a strict comparative operator. See this answer for more information.

Another important note in your instance is, document.getElementById('boot').style.backgroundImage is looking for the inline style, so if your .boot elements HTML had, say for example:

<div class="boot" style="background-image:url(Videos/printgifstart.GIF);">

then your example would work using the right comparator operand, but if your boot elements class comes from a style sheet you would need to use CSSStyleSheets API to read that information from your style sheet.

var tix = document.getElementsByClassName('ticket');
var tixb = document.getElementById('ticketb');
var tixc = document.getElementById('ticketc');
var sart = document.getElementById('shopdrawing');
var sart2 = document.getElementById('shopdrawing2');
var sart3 = document.getElementById('shopdrawing3');
var sbakdo = document.getElementById('backdoor2');

function tixbPLS() {
  if (document.styleSheets[0].cssRules[0].style.backgroundImage == 'url("Videos/printgifstart.GIF")') {
    alert("hello! world!");
  }
}
.boot {
  width: 1000px;
  height: 1000px;
  background-image: url(Videos/printgifstart.GIF);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: fixed;
  bottom: -150px;
  right: 105px;
  z-index: 100;
}
<div class="Logo2" id="blogo">
  <h1></h1>
  <div class="MirroredSmiles"></div>
  <button id="ticketb" class="ticketb" onclick="tixbPLS()">Click me</button>
</div>
dale landry
  • 7,831
  • 2
  • 16
  • 28
  • thanks lots your code works here but not in explorer idk. the debug is giving me clues. Technically this is a solve. TY for the extra info too i am studying hard tysm!! – demontheif Apr 15 '23 at 00:41
  • if anyone looking at this it doesn't work either. It's a security reason. https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property – demontheif Apr 15 '23 at 00:56
0

You can use getComputedStyle to get the actual applied CSS property values on an element, regardless of which stylesheet they come from.

Note, however, that relative URLs will be resolved to the their absolute version. You could use string methods like String#match or String#includes to check for the values you want. RegExp#test may be applied as well.

let backgroundImg = getComputedStyle(document.querySelector('.boot')).backgroundImage;
console.log(backgroundImg);
let match = backgroundImg.match(/^url\("(.+)"\)$/);
if (match) {
  // multiple ways to verify the URL
  console.log(match[1]);
  console.log(new URL('Videos/printgifstart.GIF', document.baseURI).href === match[1]);
  let { pathname } = new URL(match[1]);
  console.log(pathname);
  console.log(pathname === '/Videos/printgifstart.GIF');
}
.boot {
    width: 1000px;
    height: 1000px;
    background-image:url(Videos/printgifstart.GIF);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: fixed;
    bottom: -150px;
    right: 105px;
    z-index: 100;
}
<div class="boot"></div>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80