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
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 thestyle 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.We have an object here. The first iteration of that object
0
has acssRules
object nested, the first iteration of that object has a style object, which is where the stylebackground-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: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.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
orString#includes
to check for the values you want.RegExp#test
may be applied as well.