Develop Reference

JavaScript: backgroundImage isn't changing with onMouseOver

I'm pretty new to JavaScript, and I'm trying to figure something out. I have a series of images within a table, and I'd like each image to display within a div element when you hover over one. The problem is, the code doesn't appear to be doing anything. I hover over the div element, and no changes are being made to the #bigdisplay element. If I replace the backgroundImage with a property such as color, it works completely fine. What am I doing wrong? This is the code for my div element.
<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>
If I must provide any other code from my site I will (although I don't believe any of it is relevant). Any help would be greatly appreciated! Thank you!

Your code is fine. I separated the js just to make it easier to read. Your problem is either you have no height to the div or your path is wrong
function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}
html,body,div{
height:100%;
}
<div id="bigdisplay" onmouseover="test()">
test
</div>

You're not properly escaping the string in the attribute. Attach the listener in Javascript instead, rather than in HTML attributes (which is as bad as eval) and it'll be easier to read and write:
const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

I think one problem is that you used single quote to quote 'images/Slideshow1.png'. But you used single quote also for 'url('images/Slideshow1.png')'. So there is a conflict. Try 'url("images/Slideshow1.png")'. A part for this I find better to define the event handler function in the js document linked to the html document.

using angular ng-style to call out a background image

I am having an with using the ng-style directive. I want to create add a button to my ng-repeat which is css sprite. If i include the sprite normal way my element inspector has a good old moan. from the information i gather from the Angular documentation
i thought it was as simple as the following:
<button ng-style="{'background-image':'url:('/img/Myimage.png')'}">test</button>
However i am receiving a snytax error message from this line of code. Does anyone know the correct method?

<button ng-style="{'background-image':'url(\'img/MyImage.png\')'}">test</button>
is the correct way to do it. was missing the escape the quotes in url 'url:(\'/img/Myimage.png\')'

Your CSS syntax is incorrect for url, you have extra : and I would remove quotes for the src so the whole property is one string
<button ng-style="{'background-image':'url(/img/Myimage.png)'}">test</button>
I really don't undertsand why you would use ng-style for this. A simple CSS rule and class would make more sense since you aren't evaluating anything

oh,{color:' something',background:'something '}
ng-style="{background:'url(something)'}"
or
ng-style="{'background-image':'url(something)'}"

Div with a jQuery click event bound to it is not firing when clicked?

It could be a rookie mistake, but I've gone over my code enough times doing things such as; pre-pending .select-delete with div, attempted to use document.write("Hello") to see if the event was firing or not.
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/5/
I really have no idea what's going on :(.
Any help would be greatly appreciated!
Edit: Linked to the incorrect JSFiddle, relinked to the correct one.

There is no - in your div class name.
<div id="1" class="selectdelete"></div>
$('.select-delete').click( function() {
Got it - id needs to be wrapped in quotes.
var value = $(this).attr('id');

The trigger is firing, but your code is not running because of an error - you're not quoting the string 'id' so it's an undefined value. Use your browser's debugger tool - it will help for this sort of thing.
Beyond that though, I can't say anything further because it's not clear what the desired result is.
Edit There's another issue as well - the selector is not working. You can't use the [ and ] character unquoted inside a jQuery comparison like that. The simplest solution is just not to have those characters in your input names. But you can also use escaping like so: $('select[name=g_country\\['+value+'\\]]').

I know you already accepted my other answer, but I just want to add for the record that there is another way to do it. Specifically, this seems like one of those cases where jQuery is less helpful rather than more. What I would do is change your HTML so the element names were also given as IDs, and then write it like so:
document.getElementById('g_country['+value+']').disabled = true;
document.getElementById('g_url['+value+']').disabled = true;

Choosing item from dropdown menu with javascript

Hey I am trying to choose option from one site with javascript. No luck, I have tried couple of methods, but none seem to work. In this site http://www.finnkino.fi/movies/maxim_helsinki there is dropdown menu which says Tänään, 13.11.2010. I need to change to to another value from the menu with javascript. Help is highly appericiated! Thanks!

Emulating the user's mouse clicks:
$('#dt_input').click();
$('#dt_input_14\\.11\\.2010').click();
Two backslashes are necessary before each dot because jQuery interprets the dot to refer to a specific HTML class; we need to escape the dots. Alternatively, use document.getElementById, which doesn't require the dots to be escaped:
$(document.getElementById('dt_input_14.11.2010')).click();

You could set the value of the <select> tag to some other value:
document.getElementById('dt').value = '08.01.2011';
This will select the option with value="08.01.2011".
Or using jquery:
$('#dt').val('08.01.2011');

How to delete text string using JQuery?

I have the following code:
$('.breadcrumb:contains(",")').hide();
It does as expected and hides the entire breadcrumb,
but how would I go about just remove the comma?
==========
EDIT:
<div class="breadcrumb">
Link 1,
Link 2
</div>
==========
Thanks for any help

You can do it like this:
$('.breadcrumb:contains(",")').html(function(i, h) {
return h.replace(/,/g, '');
});
The .html() function accepts a function, you can see the docs here. The above code replaces all commas in all .breadcrumb elements. Example here: http://jsfiddle.net/ZZG8p/

$('.breadcrumb:contains(",")').html($('.breadcrumb:contains(",")')
.html().replaceAll(",", ""));

.hide() hides the selected node. You're going to have to get the text from the node (using .text()), parse it to pull out the comma, and then re-set the text on the node.

You can JavaScript's String replace method. However, I'm going to go out on a limb and imagine what happened. You had and an array and then you looped through it to generate your bread crumbs and now you want to get rid of the trailing comma.
The solution to that problem is to use split() and use ',' as the separator. This way you only have internal commas.

$('.breadcrumb:contains(",")').remove();
Though this will remove it from the DOM, so make sure you select the correct one.