onFocus not working with javascript function

Question

Here's the fiddle. I'm trying to make the textbox glow 0 0 30px #96f226 using onFocus in the input tag, but you know when you click on a textbox and the border changes? That's when I want it to glow. The JS follows everything I have know, but it doesn't work.

JS (just for the problem):

function input() {
    var x = document.getElementById('input');
    x.style.box-shadow = '0 0 30px #96f226';
}

Answer 1

change box-shadow to boxShadow. try this code for toggling focus

function inputfocus(x) {
    x.style.boxShadow = '0 0 30px #96f226';
}
function inputblur(x) {
    x.style.boxShadow = 'none';
}

<input type="text" onFocus="inputfocus(this)" onblur="inputblur(this)">

jsfiddle

CSS

#input:focus{
   box-shadow: 0 0 30px #96f226;
   -webkit-box-shadow: 0 0 30px #96f226;
   -moz-box-shadow: 0 0 30px #96f226;
}