Почему не отрабатывает функция JS?

471
24 ноября 2016, 10:23

Есть у меня следующий код:

  html = []; 
  function addTagInfo() { 
    html.push("<div class='row'> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Тег на странице:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Название переменной:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Название для CSV:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
    </div>"); 
    html.push("<button type='button' class='btn btn-success' onclick='addTagInfo()'>Еще тег</button>"); 
  } 
 
  url.onblur = function() { 
    function isURL(str) { 
      var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?"); // fragment locator 
      if(!urlPattern .test(str)) { 
        return false; 
      } else { 
        return true; 
      } 
    } 
    if (!isURL(this.value)) { // введено не число 
      // показать ошибку 
      this.className = "error"; 
      error.innerHTML = 'Вы ввели не url. Исправьте, пожалуйста.' 
    } else { 
      addTagInfo(); 
      html.push("<div class='form-group'> \ 
        <label for='isSCV'>Создать ли CSV:</label> \ 
        <input type='checkbox' class='form-control' id='isSCV'> \ 
      </div>"); 
      html.push("<button type='button' class='btn btn-success'>Парсить</button>"); 
      $('#parser').append(html.join('')); 
    } 
  }; 
  </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <p>Заполните нижеследующие поля:</p> 
  <form id="parser"> 
    <div class="form-group"> 
      <label for="usr">Url:</label> 
      <input type="text" class="form-control" id="url"> 
    </div> 
    <div id="error"></div> 
  </form> 
</div>

А функция, которая должна запускать при нажатии на кнопку "Еще тег", почему-то не отрабатывает. Чтобы поля появились при выполнении кода достаточно вставить любую валидную ссылку.

Answer 1

Возможно, моя правка кода противоречит задумке, но функция добавляла в переменную html элемент, но потом не вставляла этот html в контейнер.

html = []; 
  function addTagInfo() { 
    html.push("<div class='row'> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Тег на странице:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Название переменной:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
      <div class='col-md-4'> \ 
        <div class='form-group'> \ 
          <label for='usr'>Название для CSV:</label> \ 
          <input type='text' class='form-control' id='url'> \ 
        </div> \ 
      </div> \ 
    </div>"); 
    html.push("<button type='button' class='btn btn-success' onclick='addTagInfo()'>Еще тег</button>"); 
    $('#parser').append(html.join('')); 
    html = []; 
  } 
 
  url.onblur = function() { 
    function isURL(str) { 
      var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?"); // fragment locator 
      if(!urlPattern .test(str)) { 
        return false; 
      } else { 
        return true; 
      } 
    } 
    if (!isURL(this.value)) { // введено не число 
      // показать ошибку 
      this.className = "error"; 
      error.innerHTML = 'Вы ввели не url. Исправьте, пожалуйста.' 
    } else { 
      addTagInfo(); 
      html.push("<div class='form-group'> \ 
        <label for='isSCV'>Создать ли CSV:</label> \ 
        <input type='checkbox' class='form-control' id='isSCV'> \ 
      </div>"); 
      html.push("<button type='button' class='btn btn-success'>Парсить</button>"); 
      $('#parser').append(html.join('')); 
       
    } 
  }; 
  </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <p>Заполните нижеследующие поля:</p> 
  <form id="parser"> 
    <div class="form-group"> 
      <label for="usr">Url:</label> 
      <input type="text" class="form-control" id="url"> 
    </div> 
    <div id="error"></div> 
  </form> 
</div>

READ ALSO
Javascript $.post

Javascript $.post

Как получить данные на email из $. post ?.

371
Как объединить два *.js в один?

Как объединить два *.js в один?

Есть файл *. js для проекта из двух страниц.

707
Принудительно перерисовать элемент

Принудительно перерисовать элемент

Здравствуйте! Есть задача: по мере работы программы, выводить промежуточное состояние в таблицу. Для этого есть примерно такой код:.

636
Взять длину length коллекции после работы директивы ng-repeat

Взять длину length коллекции после работы директивы ng-repeat

Здравствуйте! Вот такая вот заминка получается, директива ng-repeat выводит в список.

434