Форум

Devi2015 · #1 (**permalink**) 21.12.2015, 18:55

Панель содержит поле ввода, список и кнопки «Добавить» и «Изменить». При нажатии на кнопку «Добавить» содержимое редактора (если оно
не пустое) добавить в список и очистить редактор. При нажатии на кнопку «Изменить» выбранную строку списка (если она выбрана) записать в редактор и удалить из списка.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<SCRIPT TYPE="text/JavaScript">
function Addstr(f)
{ var elOpt= new Option;
str=f.Newstring.value;
if (str.length==0) return;
elOpt.text=str;
//elOpt.value="str";
f.rows.options.add(elOpt);
}
function Delstr(f)
{ i=0;
while (i<f.rows.options.length)
if (f.rows.options[i].selected) f.rows.options[i]=null;
else i++;
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Список имен</H3>
<FORM ACTION="http:/D:/try_web_site/Наташа" METHOD="post">
<SELECT SIZE=8 NAME="rows" MULTIPLE>
<OPTION>abcd</OPTION>
<OPTION>efgh</OPTION>
<OPTION>ijkl</OPTION>
<OPTION>mnop</OPTION>
</SELECT>
<INPUT TYPE=TEXT ID="Newstring">
Новая строка
<INPUT TYPE="button"
ONCLICK="Addstr(this.form)"
ID="Add" VALUE="Добавить">
<INPUT TYPE="button"
ONCLICK="Delstr(this.form)"
ID="Rem" VALUE="Удалить">
</FORM>
</BODY>
</HTML>
Что нужно изменить? Что добавить?

Coriolan161 · #2 (**permalink**) 25.12.2015, 21:41

Devi2015,
сначала нужно привести код в читаемый вид

Coriolan161 · #3 (**permalink**) 26.12.2015, 12:29

Devi2015, на

<!DOCTYPE html> <!--по новому стандарту доктайп такой -->
<html>
  <head>
    <script> <!-- язык можно не указывать. Он по умолчанию JS -->
    var add=function(){
	var sel = document.getElementById('Rows'),
      str = document.getElementById('newString').value,
      opt = document.createElement("option");
      if(str!=""){
        opt.text = str;
        sel.add(opt);
        document.getElementById('newString').value="";
      }
      else{ alert("Строка пустая!") }
    }

    var rem=function(){
	var sel = document.getElementById('Rows'),
        opt = sel.options[sel.selectedIndex];
	sel.removeChild(opt)
     }
      document.getElementById('Add').addEventListener('click',add);
      document.getElementById('Remove').addEventListener('click',rem);
    </script>
  </head>
<body>
  <h3>Список имен</h3>
  <form action="http:/D:/try_web_site/Наташа" method="post">
    <select size=8 id="Rows" multiple>
      <option>Первый</option>
      <option>Второй</option>
      <option>Третий</option>
      <option>Чытвертый</option>
    </select>
    <input type="text" id="newString">Новая строка
    <input type="button" id="Add" value="Добавить">
    <input type="button" id="Remove" value="Удалить">
  </form>
</body>
</html>

Dilettante_Pro · #4 (**permalink**) 26.12.2015, 16:38

У вас не работают кнопки, т.к. на них не назначены обработчики onclick

операции

document.getElementById('Add').addEventListener('click',add);
document.getElementById('Remove').addEventListener('click',rem);

не выполняются, т.к. к ним нет обращения.
Нужно включить их в функцию

function init() {
document.getElementById('Add').addEventListener('click',add);
document.getElementById('Remove').addEventListener('click',rem);
}

и запускать ее при загрузке страницы

Код:

<body onload="init();">

Coriolan161 · #5 (**permalink**) 26.12.2015, 18:56

Dilettante_Pro,
я в песочнице делал

Dilettante_Pro · #6 (**permalink**) 28.12.2015, 10:23

и что в песочнице? Вот ваш код в работающем виде.

Сообщение от Coriolan161

Devi2015, на

<!DOCTYPE html> <!--по новому стандарту доктайп такой -->
<html>
  <head>
    <script> <!-- язык можно не указывать. Он по умолчанию JS -->
    var add=function(){
	var sel = document.getElementById('Rows'),
      str = document.getElementById('newString').value,
      opt = document.createElement("option");
      if(str!=""){
        opt.text = str;
        sel.add(opt);
        document.getElementById('newString').value="";
      }
      else{ alert("Строка пустая!") }
    }

    var rem=function(){
	var sel = document.getElementById('Rows'),
        opt = sel.options[sel.selectedIndex];
	sel.removeChild(opt)
     }
    function init() {
      document.getElementById('Add').addEventListener('click',add);
      document.getElementById('Remove').addEventListener('click',rem);
   }
    </script>
  </head>
<body onload="init();">
  <h3>Список имен</h3>
  <form action="http:/D:/try_web_site/Наташа" method="post">
    <select size=8 id="Rows" multiple>
      <option>Первый</option>
      <option>Второй</option>
      <option>Третий</option>
      <option>Чытвертый</option>
    </select>
    <input type="text" id="newString">Новая строка
    <input type="button" id="Add" value="Добавить">
    <input type="button" id="Remove" value="Удалить">
  </form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript