Сбой метода динамического изменения стиля

#javascript

#javascript

Вопрос:

Попытка динамического изменения стиля ниже, но функция перестает работать. Я использовал JSHint, и, кажется, все в порядке.

 function styleInput(elClass,color)
{
  "use strict";

  var document;
  elClass = document.getElementsByClassName(elClass);



var len = elClass.length;

    for (var i=0; i < len;i  ) {

        if (elClass[i].className === elClass) 


                {

                  var tmp = elClass[i];


                  tmp.style.backgroundColor = color;

                  tmp = " ";





                }

        }




}

styleInput("fm_bushido", "#f3f3f3");
 

——HTML——

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type="text" name="name" class="fm_bushido txt" placeholder="Name:"></input>
</body>
</html>
 

Ответ №1:

Вы используете переменную elClass дважды и перезаписываете значение, переданное в функцию, значением, возвращенным из document.getElementsByClassName(elClass); . Как только ваш скрипт приступает к if (elClass[i].className === elClass) работе, вы сравниваете имя класса элемента с самим элементом, а не со значением, которое вы передали в функцию ( fm_bushido ) .

Просто измените имена одного из этих элементов, и он должен работать.

Комментарии:

1. Спасибо, запускаю FormClass для динамического создания форм, ничего уникального, просто пример кода ООП. Не могли бы вы предложить способ передачи имен классов в формате «classname classname». Получение того, что находится до или после пробела?

2. Если вы можете, используйте jQuery …it это сделает ваш лайк намного проще