skip to Main Content

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.

2

Answers


  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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search