niche Posted March 15, 2012 Share Posted March 15, 2012 How do I change the backgroundColor attribute to blue or green using the script as an example: <head><script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; div.style.backgroundColor = 'blue'; } else { el.innerHTML = 'Send to Cart'; div.style.backgroundColor = 'green'; }</script></head><body><div id="one"><button name="jim" type="button" onclick="display(this)">Show Date</button></div><div id="two"><button name="john" type="button" onclick="display(this)">Show Date</button></div><div id="three"><button name="jack" type="button" onclick="display(this)">Show Date</button></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2012 Share Posted March 15, 2012 As you wish to target the div which is the parent of button element function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'blue'; } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'green'; } } Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 Thanks dsonesuk. When I give the first div an initial background-color:blue; it doesn't go to green the first onlick. why? Current code: <head><script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'blue'; } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'green'; }}</script></head><body><div id="one" style="height:100px;width:100px;background-color:blue;"><button name="jim type="button" onclick="display(this)">Send to Cart</button></div><div id="two"><button name="john" type="button" onclick="display(this)">Send to Cart</button></div><div id="three"><button name="jack" type="button" onclick="display(this)">Send to Cart</button></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2012 Share Posted March 15, 2012 because the innerhtml == "Send to Cart" at start from blue to blue, text changes to "Sent to Cart", next click not "Send to Cart" change to green, change text to...and so on. Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 I was writing "I don't understand" then I did understand. I had the colors backwards. So, it's a dooh! instead. I'm a little confused on which DOM is being referenced XML or HTML? Link to comment Share on other sites More sharing options...
thescientist Posted March 15, 2012 Share Posted March 15, 2012 An HTML DOM, since you are working with HTML elements.http://www.w3schools.com/htmldom/default.asp if you were working with an XML DOM, it would be completely different.http://www.w3schools.com/xml/xml_dom.asp Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 Thanks thescientist. That helped me find this: http://www.w3schools.com/jsref/dom_obj_node.asp to find the ref for parentNode. I looked for a way to target the button, but didn't see one. What's the object that will target the child (the button in this case)? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2012 Share Posted March 15, 2012 function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'blue'; el.parentNode.childNodes[0].style.color="red"; //to parenetnode then back to first (0) childNode } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'green'; el.parentNode.childNodes[0].style.color="lime";//to parenetnode then back to first (0) childNode } } Link to comment Share on other sites More sharing options...
ShadowMage Posted March 15, 2012 Share Posted March 15, 2012 Just warning about childNodes: It also returns text nodes. In your example, <div id="one" ...><button name="jim type="button" onclick="display(this)">Send to Cart</button></div> This isn't an issue, because the div has no text node children. If you instead wrote it like this: <div id="one" ...> <button name="jim type="button" onclick="display(this)">Send to Cart</button></div> You'd have a problem. The div now has 2 text nodes because whitespace (including new lines) is counted as text. In this case, childNodes[0] would refer to the newline and tab (or spaces) before your button element. childNodes[1] would actually refer to the button. To get around this, you'd have to loop through all the childNodes and test the nodeType property (nodeType 1 is an element node) or the nodeName property to find your button. Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 Thank-you dsonesuk and ShadowMage. Had no idea that how I format my code impacts node order. Did I say that right? Link to comment Share on other sites More sharing options...
ShadowMage Posted March 15, 2012 Share Posted March 15, 2012 More specifically, the number of nodes. The order in which your code is written always affects the order in which the nodes are listed. Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 Thanks. How do I test for that? console.log(el.parentNode); ? If so, where do I put it in this code: <script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'green'; el.parentNode.childNodes[0].style.color="red"; //to parenetnode then back to first (0) childNode } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'blue'; el.parentNode.childNodes[0].style.color="lime";//to parenetnode then back to first (0) childNode }}</script> Link to comment Share on other sites More sharing options...
ShadowMage Posted March 15, 2012 Share Posted March 15, 2012 Test for what? Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 I misread your post your said loop not test. How do you write a JS loop that runs through el.parentNode.childNodes? Is el.parentNode.childNodes the name of the array? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2012 Share Posted March 15, 2012 Identify how many childNodea within a parent then use a 'for loop' to loop through them and identify what they are function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'blue'; el.parentNode.childNodes[0].style.color="red"; } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'green'; el.parentNode.childNodes[0].style.color="lime"; } alert("childeNodes Found: "+el.parentNode.childNodes.length) for(i=0; i<el.parentNode.childNodes.length;i++) { if(el.parentNode.childNodes[i].nodeType ==1) { alert("A Element detected! Element Name : "+el.parentNode.childNodes[i].nodeName) } else {alert("just text, line-break, whitespace detected! This nodeName is : "+el.parentNode.childNodes[i].nodeName) } } } Link to comment Share on other sites More sharing options...
niche Posted March 16, 2012 Author Share Posted March 16, 2012 I'm not getting any of the alerts to work. Even when I deleted the for loop and added a semicolon to the alert: <html><head><script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'green'; el.parentNode.childNodes[0].style.color="red"; } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'blue'; el.parentNode.childNodes[0].style.color="lime"; } alert("childeNodes Found: "+el.parentNode.childNodes.length);}</script></head><body><div id="one" style="height:100px;width:100px;background-color:blue;"><button name="tom" type="button" onclick="display(this)">Send to Cart</button></div></body></html> Link to comment Share on other sites More sharing options...
niche Posted March 16, 2012 Author Share Posted March 16, 2012 The alert displays in the first script works and doesn't in the second. Why? <html><head><script type="text/javascript">function display(el) { alert("childeNodes Found: "+el.parentNode.childNodes.length); }</script></head><body><div id="one" style="height:100px;width:100px;background-color:blue;"><button name="tom" type="button" onclick="display(this)">Send to Cart</button></div></body></html> <html><head><script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'green'; el.parentNode.childNodes[0].style.color="red"; } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'blue'; el.parentNode.childNodes[0].style.color="lime"; } alert("childeNodes Found: "+el.parentNode.childNodes.length); }</script></head><body><div id="one" style="height:100px;width:100px;background-color:blue;"><button name="tom" type="button" onclick="display(this)">Send to Cart</button></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2012 Share Posted March 16, 2012 Because you now have a new line break between div and button, it counts this as a node, but! you are applying a style to this node, which it cannot do as it is not a element, so this breaks the code, and you end up with el.parentNode.childNodes[0].style is undefined error, which is the whole point we are trying to make, in that you will need to loop through nodes, identify it is a element, the correct element, and then apply the style. this produces 3 childnodes (1) \n (2)button (3)\n. <div id="one" style="height:100px;width:100px;background-color:blue;"><button name="tom" type="button" onclick="display(this)">Send to Cart</button></div> el.parentNode.childNodes[0].style will target (1) which not element causing error, that breaks processing the rest of code; this produces 1 childnode (1) button <div id="one" style="height:100px;width:100px;background-color:blue;"><button name="tom" type="button" onclick="display(this)">Send to Cart</button></div> el.parentNode.childNodes[0].style will target (1) which is element, then style it with no further problems. this will loop through all childnodes whatever they are, identify if element and a button and apply style no matter how many newline, spaces you use. function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; el.parentNode.style.backgroundColor = 'green'; for(i=0; i<el.parentNode.childNodes.length;i++) { if(el.parentNode.childNodes[i].nodeType == 1 && el.parentNode.childNodes[i].nodeName.toLowerCase()=="button") { el.parentNode.childNodes[i].style.color="red"; } } } else { el.innerHTML = 'Send to Cart'; el.parentNode.style.backgroundColor = 'blue'; for(i=0; i<el.parentNode.childNodes.length;i++) { if(el.parentNode.childNodes[i].nodeType == 1 && el.parentNode.childNodes[i].nodeName.toLowerCase()=="button") { el.parentNode.childNodes[i].style.color="lime"; } } } alert("childeNodes Found: "+el.parentNode.childNodes.length);} Link to comment Share on other sites More sharing options...
niche Posted March 16, 2012 Author Share Posted March 16, 2012 You punched through some confusion I had about what is an element. Obviously, the line breaks change things. Though, it's the line breaks not the style that's causing the problem with the earlier script. Please confirm. I want to be clear on this. Link to comment Share on other sites More sharing options...
thescientist Posted March 16, 2012 Share Posted March 16, 2012 sometimes it's just easier to give an element an ID and get a reference that way.... Link to comment Share on other sites More sharing options...
ShadowMage Posted March 16, 2012 Share Posted March 16, 2012 it's the line breaks not the style that's causing the problem with the earlier script. Please confirm. I want to be clear on this.Yes. The line breaks (or any whitespace character) create text nodes. Text nodes do not have a style property. sometimes it's just easier to give an element an ID and get a reference that way....True, but I think niche is just trying to expand on the knowledge he's received. I believe the original issue was solved. Link to comment Share on other sites More sharing options...
niche Posted March 16, 2012 Author Share Posted March 16, 2012 On that note I'd like to close this topic. You're right ShadowMage. This topic adds to my understanding of the context of JS. I need to thank you, thescientist and especially dsonenuk for making this an outstanding topic. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.