I have the following code:

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>

And for some reason, the function that should launch when you click on the "Another tag" button does not work. For the fields to appear when executing the code, it is enough to insert any valid link.

  • Inserted several types of valid links, and did not pass validation: ( - ilyaplot
  • one
    author links without prefix www are invalid - lexxl
  • Oh, I will correct this defect. - Timur Musharapov
  • The function adds an element to html, but does not display it in the container. - ilyaplot

1 answer 1

Perhaps my editing of the code contradicts the idea, but the function added an element to the html variable, but then did not insert this html into the container.

 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>

  • Tell me, how can you make one global variable? To be added once - in else. - Timur Musharapov 1:49
  • @TimurMusharapov I do not understand how you can make an addition 1 time, if there are at least 2. Initial output and addition. To solve what problem is this variable used at all? - ilyaplot
  • I am writing a parser. This data will then go as material for it. - Timur Musharapov 1:53
  • Now created an additional variable, but is this a normal way? - Timur Musharapov 1:58
  • one
    It is hard to say because I still do not know the purpose of writing html to a variable. Is she then transferred somewhere? It may be worth append without a variable. + I would also remove the buttons. - ilyaplot