5 Replies - 1326 Views - Last Post: 27 January 2012 - 01:30 PM

#1 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 12:32 PM

Why cant I change the background image using this code? How should I be setting the background image property here?

I have td tags with the name HLC1. I cannot use getElementById for what my use is for this. I am updating an entire column with the same name. I can do this by accessing the class name like: nodes[i].className = "whateverclass", but I already have class names assigned and only need to change the background image.


  function HLC(HLCnum) { 
    var nodes = document.querySelectorAll('[name=HLC1]');  
            var len = nodes.length;
            for (i = 0; i < len; i++) {
                // DOESNT WORK >> nodes[i].style.setProperty("backgroundImage", "url('../../../layout_images/bg_50percent_white.png')")
                // DOESNT WORK >> nodes[i].style.backgroundImage = "url('../../../layout_images/bg_50percent_white.png')"
                // DOESNT WORK >> nodes[i].style({ backgroundImage: "url('../../../layout_images/bg_50percent_white.png')" })	
        }
    }




Is This A Good Question/Topic? 0
  • +

Replies To: using querySelectorAll() and assigning style.backgroundImage wont work

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,239
  • Joined: 08-June 10

Re: using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 12:57 PM

the name attribute on <td> is most probably ignored. only form control elements (<input>, etc) and <a> can have a name.

try alerting the length of nodes so you can see whether you have matches at all.
Was This Post Helpful? 0
  • +
  • -

#3 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

Re: using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 12:59 PM

Nevermind. I fixed it. This had to be the most rediculous thing I have seen in a while. For some reason the onmouseover/onmouseout that called the function had to be after the class="blah" in the td tag. What F'n sense does that make?? No browsers would work without that fix either. Such a waste of time. Sometimes I dont understand simple things that break code. This should not have been an issue. oh well, maybe this will save someone some time.
Was This Post Helpful? 0
  • +
  • -

#4 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

Re: using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 01:06 PM

View PostDormilich, on 27 January 2012 - 12:57 PM, said:

the name attribute on <td> is most probably ignored. only form control elements (<input>, etc) and <a> can have a name.

try alerting the length of nodes so you can see whether you have matches at all.



Thanks for your response, however you can name td tags and it will work fine in any modern browser. I've been doing this same thing for a while with changing className. I should have made sure the onmouseover was being called like you said with an alert, before going crazy over the js. :sweatdrop:
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,239
  • Joined: 08-June 10

Re: using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 01:15 PM

View Postwebsitepro, on 27 January 2012 - 08:59 PM, said:

For some reason the onmouseover/onmouseout that called the function had to be after the class="blah" in the td tag.

one more reason to not use inline-JS. wouldn’t have happened if you defined the event from within Javascript.
Was This Post Helpful? 0
  • +
  • -

#6 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

Re: using querySelectorAll() and assigning style.backgroundImage wont work

Posted 27 January 2012 - 01:30 PM

What is inline about the call? for testing I hard coded the td name. Serious question. If you know somethiing I dont, please elaborate.

<td name="HLC1" onmouseover=""HLC(1);"">asdf</td>


duh. nevermind. Im with you.. You mean actually defining the onmouseover event itself. You are correct and I may end up converting the code.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1