2 problems, why won't alert box work and why won't image change?

[heldenbrau]

<script type="text/javascript">
function toggleBg(plus) {
if (document.getElementById(plus).style.background=="url('/images/plus.png')"{
  document.getElementById(plus).style.background="url('/images/minus.png')";
}else{
  document.getElementById(plus).style.background="url('/images/plus.png')";
}
}
alert("This is a test alert message");
</script>

 

I wanted to change the image of a button when it is clicked from a plus to a minus and then back to a minus.  The problem is, it won't change when clicked and if I put minus in the the else bit, it changes to a minus.  "url('/images/plus.png')" doesn't seem to match the actual property, so I wanted to get a printout of the actual property using an alert box.  But the alert box won't even work when it is in the presence of that function.  If I delete the function from the script area, the alert box works.  Why doesn't the alert box work in the script above?

[Adam]

JavaScript is event-driven, so any calls to functions or code have to be triggered by an event. If you place the alert code within a function that is called by the 'onload' event, it'll run no problems:

 

window.onload = function() {
    alert("This is a test alert message");
}

 

Also you'll most likely need to use .style.backgroundImage to return the URL.

[heldenbrau]

How would I do that so that I could print out the property of document.getElementById(plus).style.background in the alert message.  The function togglebg is called when somebody clicks a button, I want the alert to tell me what  the background style is.  If I put the alert box code inside the fuction togglebg, nothing happens, but togglebg is triggered by an event.

[Adam]

Can you show the code were trying with the alert in the toggleBg() function?

[heldenbrau]

<script type="text/javascript">
function toggleBg(plus) {
  alert("This is a test alert message");
if (document.getElementById(plus).style.background=="url('/images/plus.png')"{
  document.getElementById(plus).style.background="url('/images/minus.png')";
}else{
  document.getElementById(plus).style.background="url('/images/plus.png')";
}
}

</script>

[Adam]

.. And the alert is never shown? That suggests the function is never actually being called; which after looking appears to be a syntax error. You're missing a closing bracket:

 

if (document.getElementById(plus).style.background=="url('/images/plus.png')"){

[heldenbrau]

Yes, that is what is causing it to not work, the syntax error.  Thanks for your help, that is the first part of the problem solved.

 

 

[Adam]

Okay, what's the remaining problem?

[heldenbrau]

I have solved it now, the bit where it says:

if (document.getElementById(plus).style.background=="url('/images/plus.png')"{
  document.getElementById(plus).style.background="url('/images/minus.png')";
}

 

Should be

 

if (document.getElementById(plus).style.background=='url("/images/minus.png") repeat scroll 0% 0% transparent'){
  document.getElementById(plus).style.background="url('/images/plus.png')";

 

I was able to see this by printing out the properties of the button with the alert.

[Adam]

That will break in almost every other browser than Firefox though, as different browsers will add their own default values. You need to use .style.backgroundImage to only return the URL of the image.

[heldenbrau]

ok, thanks for the tip, I've changed it to use backgroundImage and match the url only and it works in Firefox and Ie, just seen that the rest of the page is all over the place in IE though so more work to be done.  Thanks for getting this to work.

 

 

[heldenbrau]

Spoke too soon.  In IE the plus changes to a minus, but doesn't change back into a plus again when I click it a second time.  Here is the script:

 

<style type='text/css'>@import url(styles/addcat.css);</style>
<script type="text/javascript">
function toggleBg(plus) {
if (document.getElementById(plus).style.backgroundImage=='url("/images/minus.png")'){
  document.getElementById(plus).style.backgroundImage="url('/images/plus.png')";
}else{
  document.getElementById(plus).style.backgroundImage="url('/images/minus.png')";
}
}

</script>

[Adam]

Try this:

 

function toggleBg(obj_id) {
    var obj = document.getElementById(obj_id);
    if (obj.style.backgroundImage.indexOf('minus.png') != -1) {
        obj.style.backgroundImage="url('/images/plus.png')";
    } else {
        obj.style.backgroundImage="url('/images/minus.png')";
    }
}

[heldenbrau]

Yes, now it works in both browsers, although I don't understand why.  Very new to javascript.  Thanks again for your help.

[Adam]

It didn't work before because the value of the .style.background property varies between browsers; so you can't do a straight comparison. The indexOf() method looks for the "minus.png" string within the backgroundImage property. If it's found you know the current image is the minus, so you can set it to the plus - else set it to the minus. Creating a variable for the object just makes it easier to read.

[heldenbrau]

Thanks for the explanation, I'll remember that next time I need compare values of styles.