Динамический элемент списка HTML динамически

0

Привет, я пытаюсь создать динамический

но через некоторое время он исчез, пожалуйста, помогите. Я выполняю эту задачу при нажатии кнопки поиска. Пожалуйста, напишите мой код ниже.
<!DOCTYPE HTML>
<html>
<head>    
     <script>
      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }
     </script>
</head>
<body>    
    <section class="webdesigntuts-workshop">
        <form action="" method="" name="myform" onSubmit="handleClick()">   
            <!--<input name="Submit"  type="submit" value="Update" />   -->
            <input name="Submit" type="search" placeholder="Search...">      
            <button>Search</button>
        </form>
        <div>
            <ul id="list">
            </ul>
        </div>
    </section>
</body>
</html> 
Теги:

4 ответа

1

Попробуй это

<section class="webdesigntuts-workshop">
    <form action="javascript:handleClick()" method="post" name="myform">
        <!--<input name="Submit" type="submit" value="Update" />-->
        <input name="Submit" type="search" placeholder="Search...">
        <button>Search</button>
    </form>
    <div>
        <ul id="list"></ul>
    </div>
</section>

DEMO

0

Это потому, что форма отправляется после нажатия. Чтобы предотвратить это, вы можете либо вернуть false:

onSubmit="return handleClick()"

      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
          return false;
      }

Или передать событие и вызвать preventDefault:

onSubmit="handleClick(event)"

      function handleClick(e)
      {
          e.preventDefault();
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }
0
  <section class="webdesigntuts-workshop">
    <form action="" method="" name="myform" >
        <input  name="Submit" type="search" placeholder="Search...">
        <input  type="button" name="Search" value="Search" onClick="handleClick()"/>
 </form>
<div>
    <ul id="list"></ul>
</div>
 </section>
 check This one its working fine.
0

Проблема в том, что вы используете input type='submit' и он отправляет запрос на отправку.

Используйте input type='button' и ваша проблема будет решена.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню