How to Change Background Image Attribute in JS - javascript

I'm currently attempting to change an attribute of a JS variable from url("../images/video.png") (how it was declared in the CSS) to url("../images/pause.png") via this line of code:
fullscreenPlayPauseButton.style.backgroundImage = "url("../images/pause.png")";
The mouse over of the image is showing the image and both images are in the folder. However, once this line of code is executed, the image that originally showed up (the video.png) turns grey. The error I'm getting in console is "Uncaught SyntaxError: Unexpected token ." on the line where that code is. Thanks in advance for the help!

You are using two doublequotes in one line. You have to escape them or use single quotes:
fullscreenPlayPauseButton.style.backgroundImage = "url('../images/pause.png')";
or
fullscreenPlayPauseButton.style.backgroundImage = "url(\"../images/pause.png\")";
Both should work.

try to set the property like this:
fullscreenPlayPauseButton.style.backgroundImage = "url('../images/pause.png')";

Related

get box instead of horizontal line

I am trying to get three different states for check box, one is tick mark, another is box and another is empty.
in the code pen its working fine with horizontal line but how to get box instead of horizontal line.
https://codepen.io/chriscoyier/pen/avyNOd
but in fiddle I am getting an error
(index):418 Uncaught ReferenceError: ts is not defined
at HTMLInputElement.onclick
can you tell me how to fix it.
providing my code below
http://jsfiddle.net/11sp1n7t/
function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}
In jsFiddle, the javascript is implicitly wrapped in an event handler. It is not in the global scope.
Solution is to attach your onclick event handler in javascript, not in the HTML. You should do this anyway, jsfiddle or not.

Two-level javascript missing image?

I am trying to update a webpage that already has a bit of javascript in it to replace a missing image. The way it works right now is it looks for pcp.gif, and if not found displays an error message image instead. (Just like in this thread)
<p align = center><img src = PCP.gif onerror = "this.onerror=null;this.src='!FireSeasonOnly.gif';">
What I want it to do now is look for pcp.png, if not found display pcp.gif and if BOTH are not found then display the error message image. I'm not having any luck getting the second level to work. I tried wrapping it in an IF but it didn't work the way I was hoping.
<p align = center><img src = pcp.png onerror = "if (this.src='pcp.png') {this.onerror=null;this.src='pcp.gif';} else {this.onerror=null;this.src='!FireSeasonOnly.gif';} ">
The above doesn't work. If the PNG is present, it displays it. If not, it displays the GIF if present. But if both are missing, I get the broken image icon, so it's not hitting my else statement. Any suggestions?
Here's the working answer -- thank you for your help, all, especially floribon!
onerror="this.src=(this.src === location.protocol + '//' + location.host + '/Weather/Maps/pcp.gif') ? '!FireSeasonOnly.gif' : 'pcp.gif';"

How to use the jquery.mCustomScrollbar.js script better?

I have a lot of questions and would appreciate your help answering them. I've spent hours trying to figure this all out on my own but couldn't fix the problem.
My question is, when I inspect element in Google Chrome and try to add a new chunk of code to the script like this:
$("body").mCustomScrollbar({
theme:"rounded-dots",
**scrollInertia: 10**
});
why do I get this error:
Uncaught SyntaxError: Unexpected identifier
I really can't add anything extra. I can't type javascript, I can only edit the code that I find.
This is the script I use: http://manos.malihu.gr/jquery-custom-content-scroller/
My 'workable' code: http://pastebin.com/sCDHwYAW
If I add anything new it doesn't work anymore. Also the textarea doesn't show the custombar even if I have an height of 100% like the body width as well.
I would also like if I could get the image to load, the scroll speed increased and the scroll bar working in other places other than the body element. It would be perfect.
You're probably getting the syntax error because of the asterisks surrounding the second property.
Try changing it to this:
$("body").mCustomScrollbar({
theme:"rounded-dots",
scrollInertia: 10
});

Adding script as string into textarea value

The question is pretty self explanatory. What I want to do is changing the value of a textarea with jQuery. What I do is:
$( '#embedcode' ).val( "<script id='embed_1' src='/javascripts/test.js' type='text/javascript'></script>" );
What is the right way to do that. I keep getting an error :
Uncaught SyntaxError: Unexpected identifier
How to make the that I want to add as a string not a script.
Here you go:
Make your String like this :
$('#embedcode').val("<script id='embed_1' src='\/javascripts\/test.js' type='text\/javascript'><\/script>");
Check out this JsFiddle i made for you:
http://jsfiddle.net/KB9Qn/14/
You need to escape the "<" and ">".
$('#embedcode').val("\<script id='embed_1' src='/javascripts/test.js' type='text/javascript'\>\</script\>");
Demo
Your code seems to work perfectly. Here's the live demo: Click here
You need to check the line number where you are getting that error.
edit: I just had the thought. If your html markup has an error (maybe an unclosed textarea) the script can be evaluated as a script tag rather than text. Check for that. Here is a live example of an html error that will cause your problem. Click here.
Update: I believe I know exactly what the real issue is. The other posts are recommending that you escape the '<' and '>', but that should only be necessary if this javascript you are using is actually in an html file (or html generated by the server) rather than in a js file where it belongs. In the js file, it will naturally be a string as you have written it, but the html file sees it as markup even though it isn't intended to be. This is an example of why you should follow the best practices and keep javascript in a js file.
escape the < and > in the string with \

Cognos Report Studio: HTML Tag issue

I'm using cognos report studio and I came to an error on my prompt page. I got my coding to work right(I tested it on a blank page), but I noticed theres a yellow explanation point on the bottom left, which doesn't allow me to continue what I'm trying to do.
Here is a screenshot:
The error seems to be coming from my html tag in the prompt page.
Here is my coding:
<script type="text/javascript">
var theSpan = document.getElementById("FiscalYear");
var theSelect = theSpan.getElementsByTagName("select");
theSelect[0].options[2].selected=true; //This will make default value in prompt to be the first item after line, change the value '2' for other item
theSelect[0].options[0].text = 'Fiscal Year';
listBoxBusinessDate.checkData();
</script>
My error should be coming from there, I just can't figure out why. Any ideas on what it could be? Thanks.
This is a JavaScript error. The variable you are trying to use "listBoxBusinessDate" is null / undefined, so when you try to call a method on it (.checkData()), you get this error.
Where is this variable defined (its not in the snippet you provided, but could be defined earlier in the file)...?

Categories

Resources