i want when i click on my input to change the background color of the field. I would like to do it by calling a function . What am i doing wrong ? Thanks !
<input type="text" onFocus="makefieldred();" onBlur="makefieldwhite();" >
<script>
function makefieldred() {
this.style.backgroundcolor='red' ;
}
function makefieldwhite() {
this.style.backgroundcolor='white' ;
}
</script>
this within your function calls isn't the element, because of the way you've hooked them up. Also, the property name is backgroundColor (capital C) rather than backgroundcolor:
If you want to use the onXyz attribute mechanism, the easiest thing is to pass the element into the function:
<input type="text" onFocus="makefieldred(this);" onBlur="makefieldwhite(this);" >
<script>
function makefieldred(elm) {
elm.style.backgroundColor='red' ;
}
function makefieldwhite(elm) {
elm.style.backgroundColor='white' ;
}
</script>
Alternately, use modern techniques to set up the event handlers:
<input type="text" id="the Input">
<script>
(function() {
var input = document.getElementById("theInput");
input.addEventListener("focus", makefieldred, false);
input.addEventListener("blur", makefieldwhite, false);
function makefieldred() {
this.style.backgroundColor='red' ;
}
function makefieldwhite() {
this.style.backgroundColor='white' ;
}
</script>
If you have to support IE8, you'll need to use attachEvent if you don't see addEventListener on input. To handle that browser incompatibility, you can have a function to do it (taken from my other answer here):
var hookEvent = (function() {
var div;
// The function we use on standard-compliant browsers
function standardHookEvent(element, eventName, handler) {
element.addEventListener(eventName, handler, false);
return element;
}
// The function we use on browsers with the previous Microsoft-specific mechanism
function oldIEHookEvent(element, eventName, handler) {
element.attachEvent("on" + eventName, function(e) {
e = e || window.event;
e.preventDefault = oldIEPreventDefault;
e.stopPropagation = oldIEStopPropagation;
handler.call(element, e);
});
return element;
}
// Polyfill for preventDefault on old IE
function oldIEPreventDefault() {
this.returnValue = false;
}
// Polyfill for stopPropagation on old IE
function oldIEStopPropagation() {
this.cancelBubble = true;
}
// Return the appropriate function; we don't rely on document.body
// here just in case someone wants to use this within the head
div = document.createElement('div');
if (div.addEventListener) {
div = undefined;
return standardHookEvent;
}
if (div.attachEvent) {
div = undefined;
return oldIEHookEvent;
}
throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();
Then:
<script>
(function() {
var input = document.getElementById("theInput");
hookEvent(input, "focus", makefieldred);
hookEvent(input, "blur", makefieldwhite);
function makefieldred() {
this.style.backgroundColor='red' ;
}
function makefieldwhite() {
this.style.backgroundColor='white' ;
}
</script>
elm.style.backgroundColor with a capital "C".
