I don’t understand why backgroundImage wouldn’t work in this scenario. Now there are 2 errors in Inspect Element which I don’t understand which it means EXACTLY. Besides, these errors do not appear on my website. Could someone lean me hand (or even an arm) on this please?
You have a missing quote mark at the end.
document.getElementById("imgry").style.backgroundImage = "url('" + data +"')";
1 Like
Welcome to webdevelopment. Where one forgotten quote mark, gives you two errors and an hour wasted.
Thanks.
Wait a sec. My website DOES have quote mark at the end, wait a sec until I strip the code to the requiremental only.
1 Like
Here. I don’t know, I haven’t done pure JavaScript, ever 
and it fails miserably.
You still got this the same line wrong 
This is how it should look.
document.getElementById("theqrcode").style.backgroundImage = "url('" + data + "')";
I gave you the correct code in the previous post but you have added another semi colon into the mix.
You haven’t assigned ‘data’ to a variable. var data =" etc…
You need jquery for the $ function.
You still got this the same line wrong
Kappa.
This is how it should look.
document.getElementById("theqrcode").style.backgroundImage = "url('" + data + "')";
Replacing it doesn’t seem to work ;(
I gave you the correct code in the previous post but you have added another semi colon into the mix.
Is it elaboration on current code, or pointing to the answer? I can’t understand.
You haven’t assigned ‘data’ to a variable. var data =" etc…
I have alerted it on my website, it is, set. It’s the same code as the one in example. Alerting it, prints to string shown in example.
You need jquery for the $ function.
I have jQuery 2, I guess that’ll how to do
Could you tell me more about the issue? xD
It says that there’s improper ). But I don’t see any that should’ve been escaped that isn’t, and normally these things are obvious 
It’s not about data variable or anything. It doesn’t work at all, and I don’t know why. It says there’s mismatch but as I love my life, I cannot see it!
I wonder how many people went screaming through their computers to tell me how stupid I am. The bug was not on JavaScript but on CSS surface.
From
document.getElementById("theqrcode").style.backgroundImage = "url('123.jpg');";
to document.getElementById("theqrcode").style.backgroundImage = "url('123.jpg')";
Yes it would if you made all the other changes I suggested.
This is still wrong.
"url('123.jpg');";
You seem to have reintroduced the same semi colon typo that I already pointed out and corrected!
Here’s the working code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.qrcode {
background-color: #000;
}
#theqrcode {
background-color: rgba(0, 0, 0, 0.3);
background-repeat: no-repeat;
background-size: contain;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="qrcodeShower">
<div id="theqrcode"> X </div>
<span>click anywhere to close</span> </div>
<a href="#" class="qrcode">Code</a>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var data = "data:image/png;base64,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";
$("a.qrcode").click(function () {
$("div#qrcodeShower").fadeIn();
document.getElementById("theqrcode").style.backgroundImage = "url('" + data + "')";
});
</script>
</body>
</html>
Note that your fade-in routine will do nothing because the element is already visible and your fiddle has unwanted mis-matched bracket section right at the end.
});
1 Like
You seem to have reintroduced the same semi colon typo that I already pointed out and corrected!
Yes, if you could note, I already found it out. (note edit date on my post and date of your post)
Thank you Sir
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.