Macchiato Posted September 12, 2011 Share Posted September 12, 2011 I have a Javascript that retrieves the text from between the "p" tags and put it in the title value, like this: before:<option title="" value="Put Text">Put Text</option> after:<option title="$1,179.83" value="Put Text">Put Text</option> The only problem is, it doesn't work in ie6-8. Does anyone know how to make this code work in ie6-8? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Get text and put in attribute value</title></head> <body> <div class="Text"><p>$1,179.83</p></div> <form action=""> <fieldset> <select class="putText" name="put-Text"> <option id="" class="putTextOption" value="Put Text">Put Text</option> </select> </fieldset> </form> <script>window.onload=function() { var pTag = document.getElementsByClassName("Text")[0].getElementsByTagName("p")[0]; var amount = pTag.innerHTML; document.getElementsByClassName("putTextOption")[0].title=amount;} </script> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2011 Share Posted September 12, 2011 Only IE9 supports getElementsByClassName. You either need to use a different way to access those elements, or find a replacement for that function. I recommend accessing by ID instead of class. http://www.quirksmode.org/dom/w3c_core.html#fivemethods Link to comment Share on other sites More sharing options...
ShadowMage Posted September 12, 2011 Share Posted September 12, 2011 You can find a good replacement for getElementsByClassName here. Link to comment Share on other sites More sharing options...
Macchiato Posted September 13, 2011 Author Share Posted September 13, 2011 Only IE9 supports getElementsByClassName. You either need to use a different way to access those elements, or find a replacement for that function. I recommend accessing by ID instead of class. http://www.quirksmod...tml#fivemethods I replaced getElementsByClassName with getElementById and changed the classes to id's. Doesn't work, I get the error: 'document.getElementById(...).0' is null or not a object. What am I doing wrong? window.onload=function() { var pTag = document.getElementById("Text")[0].getElementsByTagName("p")[0]; var amount = pTag.innerHTML; document.getElementById("putTextOption")[0].title=amount;} You can find a good replacement for getElementsByClassName here. How do you implement this code? Link to comment Share on other sites More sharing options...
JamesB Posted September 13, 2011 Share Posted September 13, 2011 you don't need the [0] after getElementById(), only for ones which return an array of elements (more than 1), such as getElementsByName() and getElementsByTagName() Link to comment Share on other sites More sharing options...
ShadowMage Posted September 13, 2011 Share Posted September 13, 2011 How do you implement this code?Just copy and paste it into a script tag in your document head. Then you can use getElementsByClassName just as you normally would. EDIT: FWIW, though, you are probably better off using getElementById since you are only getting a reference to a single element each time. Link to comment Share on other sites More sharing options...
Macchiato Posted September 13, 2011 Author Share Posted September 13, 2011 That did the trick! Thank you for notifying me JamesB, the code now works in ie6-8 Link to comment Share on other sites More sharing options...
Macchiato Posted September 13, 2011 Author Share Posted September 13, 2011 Just copy and paste it into a script tag in your document head. Then you can use getElementsByClassName just as you normally would. EDIT: FWIW, though, you are probably better off using getElementById since you are only getting a reference to a single element each time. Like this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Get text and put in attribute value</title><script>if (!Array.prototype.contains) { Array.prototype.contains = function (val) { for (var i = this.length - 1; i >= 0; --i) { if (this[i] == val) { return true; } } return false; }}function myGetElementsByClassName (targetClass) { var arr, myElements, len, i, myClassNames, j, pu######; arr = []; myElements = this.getElementsByTagName("*"); targetClass = targetClass.split(/\s+/); len = myElements.length; for (i = 0; i < len; ++i) { myClassNames = myElements[i].className.split(/\s+/); for (j = targetClass.length - 1; j >= 0; --j) { pu###### = true; if (!myClassNames.contains(targetClass[j]) ) { pu###### = false; break; } } if (pu######) { arr.push(myElements[i]) } } return arr;}function init () { if (!document.getElementsByClassName) { var myElements = document.body.getElementsByTagName("*"); for (var i = myElements.length - 1; i >= 0; --i) { myElements[i].getElementsByClassName = myGetElementsByClassName; } document.getElementsByClassName = myGetElementsByClassName; }}window.onload = init;</script></head><body><div id="Text"> <p>$1,179.83</p></div><form action=""> <fieldset> <select class="putText" name="put-Text"> <option id="putTextOption" value="Put Text">Put Text</option> </select> </fieldset> </form><script>window.onload=function() { var pTag = document.getElementsByClassName("Text")[0].getElementsByTagName("p")[0]; var amount = pTag.innerHTML; document.getElementsByClassName("putTextOption")[0].title=amount;} </script></body></html> Doesn't seem to work Link to comment Share on other sites More sharing options...
thescientist Posted September 13, 2011 Share Posted September 13, 2011 that's a little vague. any errors? does something happen? nothing happen? From what I see, you are trying to execute two things on window.onload. Take the code from the bottom of the page (what's between the {} and put it at the end of the code snippet for init(), before the closing bracket. Then you should have no scripts at the bottom, and all stuff that you want to happen onload should be within the scope of the init function. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 13, 2011 Share Posted September 13, 2011 Yep, you are overwriting the onload handler. In the head script (ie, the script I linked you to) it sets window.onload to the init function. Then down at the bottom of your code, you set window.onload to a different function, overwriting the first. So when the onload function actually fires, only the second function executes. Because the first one never executed, getElementsByClassName remains undefined and will throw an error. Follow scientist's advice and move your second code snippet to the init function and it should work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.