1 Тема від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Тема: Допоможіть знайти помилку.

Є просте завдання - треба додавати нові рядки на екран засобами DOM.
файл index.html:

<html>
<head>
<title>add lines</title>
<meta http-equiv="content-type" content="text/html; " charset="utf-8"/>
<script type="text/javascript" src='addLine.js'></script>
</head>
<body>
   <form name="hoseform" >
     <input type="text" name="hName" size="30" />
     <input type="submit" onclick="addLine()">
   </form>  
   <ol id="mylist">
   </ol>    
</body>
</html>

файл addLine.js:

    function addLine() {     
      hoseLi=document.createElement('li');
      hoseLi.innerHTML = document.forms.hoseForm.hName.value;         
      document.getElementById('mylist').appendChild(hoseLi);
    }

все працює і тут же зникає.
тобто - як тільки закінчила працювати функція - тут же зник новий внесений елемент DOM .
не розумію - чому? хто дає команду по новій зчитати файл index.html ?

2 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2106

Re: Допоможіть знайти помилку.

Робочий варіант:

hoseForm => hoseform

function addLine() {     
    hoseLi=document.createElement('li');
    hoseLi.innerHTML = document.forms.hoseform.hName.value;         
    document.getElementById('mylist').appendChild(hoseLi);
}

submit => button
addline.js => addLine.js (для Linux)

<html>
<head>
<title>add lines</title>
<meta http-equiv="content-type" content="text/html; " charset="utf-8"/>
</head>
<body>
<script type="text/javascript" src='addLine.js'></script>
   <form name="hoseform" >
     <input type="text" name="hName" size="30" />
     <input type="button" onclick="addLine()" value="test">
   </form>  
   <ol id="mylist">
   </ol>    
</body>
</html>

Replace вебсайт

3 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Допоможіть знайти помилку.

Replace написав:

hoseForm => hoseform
ну звісно, це помилка при копіюванні коду сюди, не в ній була проблема.

addline.js => addLine.js (для Linux)
та вроді так і стоїть...

submit => button

а от тут  - якраз і причина!
виходить - submit ініціює перезавантаження сторінки?

4 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2106

Re: Допоможіть знайти помилку.

Відправляє дані форми на сторінку, яка була вказана в action. Якщо action не вказано, то це поточна сторінка, хоча це обов'язковий атрибут.

Replace вебсайт

5 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Допоможіть знайти помилку.

У функції addLine() краще додати в кінці return false;

Взагалі як на мене це хороша практика додавати  return false; або  return true; у функціях які висять при певних діях на елементах. так можна контролювати дефолтні дії бравзера.

Якщо  return false тоді дефолтна дія не виконується.

funivan вебсайт