Изменение цвета фона на Javascript на входе

Question

Я попытался выяснить способ изменения цвета фона на моем сайте при вводе пользователем в мою форму. Я не большая акула javascript, но я хорошо использую HTML и CSS. Я использую getbootstrap.com.

Bootstrap включает в себя стили проверки для ошибок, предупреждений и состояний успеха в элементах управления формой. Любой элемент .control-label, .form-control и .help-block внутри этого элемента получат стили проверки. Я хотел бы использовать стиль проверки succes независимо от того, какой вклад пользователь делает, пока есть вход.

Я думал об использовании сценария, как один под здесь, но я не могу понять, как использовать загрузочный стиль проверки:

<script type="text/javascript"> 
function { 
    document.getElementById(elementID).MyFormIdName=MyBootstrapValidationStyleClassName; 
} 
</script> 

Answer 1

, если вы хотите изменить класс, чем вы можете сделать

 document.getElementById('element_id').className='your_class_name'; 

Answer 2

Попробуйте

var target = document.getElementById('elementID'); 
target.className += "MyBootstrapValidationStyleClassName"; 

FYI: Вам не хватает имени функции.

Это что-то ниже вы пытаетесь сделать

<input type="text" id="inp" onblur="fun(this)" /> 

CSS:

.success { 
    background: green; 
} 
.error { 
    background: red; 
} 

JS:

function fun(inp) { 
    var target = document.getElementById(inp.id); 
    target.className = inp.value; 
} 

JSFiddle

Answer 3

Если вы хотите, чтобы удалить все классы, применяемые и применить класс только использовать следующие

<script type="text/javascript"> 
    (function() { 
     document.getElementById("elementID").className="MyBootstrapValidationStyleClassName"; 
    })(); 
</script> 

Если вы хотите не хотите, чтобы удалить уже применяется класс и применять еще один класс, то

<script type="text/javascript"> 
    (function() { 
     document.getElementById("elementID").className+="MyBootstrapValidationStyleClassName"; 
     //Or 
     //$("#elementID").addClass("MyBootstrapValidationStyleClassName"); 
    })(); 
</script>