iwato Posted May 17, 2009 Share Posted May 17, 2009 QUESTION: How does one change the appearance of an <input> tag -- specifically type="button"?BACKGROUND: The below set of code produces two error messages in Firebug: one going in and one coming out. At minimum, these errors tell me that I have targeted my button properly. What I do not understand is why Firebug is telling me that onHover() and mouseOut() are not functions.<head><script type="text/javascript"> function onHover() { document.getElementById("bottom_right").style.color="#FFF"; } function mouseOut() { document.getElementById("bottom_right").style.color="#FFF"; }</script></head><body><input type="button" name="bottom_right" value="Bottom Right" onclick="openWindow()" onmouseover="onHover()" onmouseout="mouseOut()"/></body Link to comment Share on other sites More sharing options...
jeffman Posted May 17, 2009 Share Posted May 17, 2009 The more efficient way would be to use the :hover attribute of CSS. But the immediate answer to the problem you presented is simple. Your input has a name but not an id. So getElementById() can't find it.Usually, when an error message tells you that something is not a function, it's because you've named it with a reserved word. I have occasionally seen this happen also when non-printing characters get into the function definition, usually at the line breaks, and usually after a copy/paste. So changing the name of the function can help. You might also try deleting all the characters at the linebreaks and replacing them with new line breaks. Link to comment Share on other sites More sharing options...
iwato Posted May 17, 2009 Author Share Posted May 17, 2009 The more efficient way would be to use the :hover attribute of CSS. But the immediate answer to the problem you presented is simple. Your input has a name but not an id. So getElementById() can't find it.So, I eliminated the name and replaced it with an id. It worked. Hooray and thanks! I hope the name was not important. . .Originally I tried to change the class of my button dynamically and use CSS. Unfortunately, I had never used the pseudo classes :link, :hover, :visited, and :active with anything but <anchor> tags.1) Can I really write input.SomeClass:hover? Will it work? I do not remember ever having seen how to change the appearance of a button using such a script. 2) Can I also write document.getElementById("SomeID").style.class="SomeClass"; ? Will this work?I have occasionally seen this happen also when non-printing characters get into the function definition, usually at the line breaks, and usually after a copy/paste.Yes, I have experienced this same phenomenon and have learned to guard against it by not pasting anything from another document until I have first changed the copied content into TXT format. It has already become a matter of habit, as it was the source of several mysterious errors elsewhere. W3C validation cured me of this problem very quickly.Roddy Link to comment Share on other sites More sharing options...
Ingolme Posted May 17, 2009 Share Posted May 17, 2009 The :hover pseudo-class works on all the elements. But in order to make it work in Internet Explorer 7, you must have a Strict DTD. Link to comment Share on other sites More sharing options...
iwato Posted May 17, 2009 Author Share Posted May 17, 2009 The :hover pseudo-class works on all the elements. But in order to make it work in Internet Explorer 7, you must have a Strict DTD.This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?Roddy Link to comment Share on other sites More sharing options...
chibineku Posted May 17, 2009 Share Posted May 17, 2009 This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?RoddyJa, ist gutt. Link to comment Share on other sites More sharing options...
jeffman Posted May 17, 2009 Share Posted May 17, 2009 This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?document.getElementById("SomeID").className = "SomeClass"; Link to comment Share on other sites More sharing options...
iwato Posted May 17, 2009 Author Share Posted May 17, 2009 document.getElementById("SomeID").className = "SomeClass";OK. I am now able to assign new classes to button objects with mouse events and change the appearance of buttons with the :hover pseudo class. This new knowledge makes me very happy. However, what I am unable to do is preserve the appearance of my buttons -- namely, the buttons' rounded corners. Short of using a JavaScript program like SVG-Roundies what must I do?The following pair of sample pages work together. Each uses a different approach to achieving the same button effects. Neither preserves the rounded edges of the button.SAMPLE PAGES: Mori and TennisRoddy Link to comment Share on other sites More sharing options...
iwato Posted May 17, 2009 Author Share Posted May 17, 2009 Ja, ist gutt.Hier ist das Problem das gedoppelte "t". Mach' aber weiter. Mir gefehlt es, ab und zu auf Deutsch zu schreiben.Roddy Link to comment Share on other sites More sharing options...
jeffman Posted May 17, 2009 Share Posted May 17, 2009 However, what I am unable to do is preserve the appearance of my buttons -- namely, the buttons' rounded corners.Yep. Different browsers approach this differently, too. All buttons start out using the OS button object (or maybe it's a copy -- I don't know). As you change properties of the button, you reach a point where the browser drops that and makes it a rectangle. This is especially noticeable on a Mac, where the button changes from a 3D oval with pretty highlights to a drab rectangle. In Firefox, all you have to do is add background-color to achieve this change.All I can suggest is using a background image. Some authors don't use the button element at all, but instead create a div with a central background image and "cap" images on the left and right to create the curves. To make it a "button" they use :hover and :active and onclick handlers.You just need to decide how important it is in exchange for the extra effort. Link to comment Share on other sites More sharing options...
chibineku Posted May 17, 2009 Share Posted May 17, 2009 Hier ist das Problem das gedoppelte "t". Mach' aber weiter. Mir gefehlt es, ab und zu auf Deutsch zu schreiben.Roddy*slinks away, utterly outclassed* Link to comment Share on other sites More sharing options...
iwato Posted May 18, 2009 Author Share Posted May 18, 2009 You just need to decide how important it is in exchange for the extra effort.I have decided for the moment that it is not worth the effort . In any case, thank you for your kind effort.Roddy Link to comment Share on other sites More sharing options...
iwato Posted May 18, 2009 Author Share Posted May 18, 2009 *slinks away, utterly outclassed*But why, I also misspelled a word.Roddy Link to comment Share on other sites More sharing options...
chibineku Posted May 18, 2009 Share Posted May 18, 2009 Mainly because I struggled to understand what you were saying. I don't really speak any language other than English, but I know select minutae of a variety, such as Russian and Japanese. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.