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.

Remove attribute in DOM and jQuery

I still have some problem. In my HTML code I set one DIV to be hidden.
<div id="personalProfileWrap" style="visibility: hidden">
I changed several times my method in java script and it can be removed this attributed. These are the functions I have tried:
var div = document.getElementById("personalProfileWrap");
div.setAttribute("style", "");
//$("#personalProfileWrap").removeAttr("style");
I also tested with Dom getElement and still does not work. Don't know where the problem is.
Please for advise.

It's a simple document.getElementById("personalProfileWrap").removeAttribute("style");
You don't even need jQuery for it. If you only want to remove one or two items, you'll have to do a .getAttribute("style") first, and parse through the set styles (semicolon delimiter), remove the one you want, and then do a .setAttribute("style", newStyleString).

The following works for me with jQuery:
$("#personalProfileWrap").css("visibility", "inherit");
Here my (short) jsFiddle demo

Replacing paragraph tag contents with a random word from javascript

When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.

The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").

The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.

Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});

WEIRD: jquery .show and .hide not responding or changing css of corresponding div

Sample Code of my error
So as you can see in the above example, next to where it says "Disclaimer Question111", there is an expand/contract link. The script works halfway, in that the text change occurs, but it does not change the display css for the div its anchored to.
Any idea why? I don't see any page errors.
The code that triggers this is in my site.js file but i pulled it out here so you can see:
$('.accordion-trigger-settings').click(function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Collapse Settings');
}
else
{
$(target).hide();
$(this).text('Expand Settings');
}
return false;
});
It applies to this block:
Expand View
<div class="padding5"></div>
<div class="accordionContent" id="accordion-season5160">
<textarea name="str_disclaimer_header5160" id="str_disclaimer_header5160"></textarea>
</div>

Using the Chrome web inspector I see you have two elements with id accordion-season5160. So, the text is changing because it applies to this but the show() method is modifying (showing/hiding) the first element with id accordion-season5160.
Make sure the id is unique.
See the image!
Hope it helps!

Actually you have two <div id="accordion-season5160"...> on the page. One of them is hidden (inside hidden <div class="hide_div">).
You can find them both using console:
document.querySelectorAll('#accordion-season5160')
You will see both of them. To see the element you can right click on it in the console and click 'Reveal in elements panel' (in Chrome)
The best way to solve this issue is to make ids unique. However you can try a quick way to solve the issue that does not require uniqueness of ids:
Replace
var target=$(this).attr('href');
with
var target=this.nextElementSibling.nextElementSibling;
JS Bin http://jsbin.com/itucop/1/edit

Why does displaying/hiding an HTML element via Javascript put it on a new line?

I have this page: http://www.problemio.com/problems/problem.php?problem_id=214
On it there is a link "suggest a solution" towards the middle bottom of the screen. If you click it, it calls a JS function to hide it, and show a diff element in its place. For some reason it places the other element on the next line which looks awkward.
Would you know why this is happening? I can't figure it out :)

The <a> tag containing the link Suggest a solution is set to display: block; This causes the breaks before and after.

Use $("#show_existing_suggestions").hide() / show() to achieve the same rather than adding the style. I tried it on Chome Developer tool and it worked as expected... Give it a try :)

Anchors are block elements by default. You'll need to style them to be inline.