HTML+CSS+JavaScript

Разобрался! Переменные надо объявлять глобальными за пределами функций, тогда всё работает.

Вопрос объединения скриптов решён.

Спасибо АЯ за помощь

Как переменную colors из функции getColors передать в функцию AddItem. Или как её сделать глобальной?

С циклом разобрался - пропустил " в строке

newitem1+=">"+colors[i];

а должно быть так

newitem1+="\">"+colors[i];

Но вот почему добавляемая кнопка не вызывает функцию добавления ещё одного списка - понять не могу!?!

Ткнул пользователь в Феррари - появляется список (на русском - видимый пользователю, на английском - в значении value) с количеством опшенов соответсвующем количеству цветов данного автомобиля. Данный список удалить нельзя но должна быть возможность добавить ещё 4 таких же списка с цветами выбранного автомобиля - для чего и нужна кнопка добавить. И вот уже эти 4 списка можно удалять для чего напротив них добавляем кнопку "Удалить". Если создали 5 списков кнопку "Добавить" удаляем. Если меньше пяти списков с цветами, - опять добавляем кнопку Добавить.

Список - это Select
Цвета - опшены.

Не заморачивайтесь Вы со смыслом - это просто пример для реализации нужного Java скрипта.

Опять ничего не понял.

Давайте определимся с терминами.
1. Список - это тег <select>
2. Внутрь тега <select> входят опшены (теги <option>), у каждого из которых есть текст (что видит пользователь) и value (которое пользователь не видит).
3. Опшенов в списке может быть любое количество - от одного и до любого разумного количества.


Ткнул ваш пользователь в первом списке на Феррари.
Я так понимаю, что у вас должен появиться второй (динамический) список с тремя опшенами, в каждом из которых будет свой свой цвет (на русском - видимый пользователю, на английском - в значении value)

Нафига вам еще 4 списка для автомобиля феррари? Что в них вы будете писать?
Может быть вы хотите добавить еще до 5-ти опшенов в открывшийся второй список?
Т.е. открылся у вас список, состоящий из трех опшенов:
Зеленый
Черный
Желтый
и вы хотите иметь возможность В ЭТОТ (один-единственный) список добавить еще и Синий, например, и Красный (довести количество опшенов в списке до максимум пяти).
Так?

Списки с цветами, не поля - извините я был не точен.

1 статический список с автомобилями и 5 динамических списков с цветами автомобиля, выбранного в первом статическом списке.

1. Да, первый список с автомобилями статический. При выборе автомобиля список выбора автомобилей заменяется текстовым названием автомобиля, чтобы после выбора нельзя было заменить. -- OK

2. В это время добавляется поле с цветами автомобиля -- что значит "поле с цветами"?
"Список с цветами" - я понимаю.
А "поле с цветами" - не понимаю.
Поле - это <input>. Как в это одно поле записать целых три цвета для, например, FerrariEnzo? Вместе с русскими и английскими названиями цветов? Через пробелы, что-ли?

Мей би вы хотите раскрытый список (тег <select size="3">) c тремя опшенами? Где видимы будут сразу все три цвета по-русски (а английские значения будут записаны в их value)?

Или вам надо три подряд поля <input>? А куда тогда value из массива записывать?

Что вам надо-то?

Да, первый список с автомобилями статический. При выборе автомобиля список выбора автомобилей заменяется текстовым названием автомобиля, чтобы после выбора нельзя было заменить. В это время добавляется поле с цветами автомобиля и кнопка Добавить. Возле первого поля с цветами не добавляем ссылку на его удаление "Удалить", так как меньше 1-го поля не долно быть. Возле остальных полей добавляется ссылка "Удалить" на удаление данного поля. Кнопка Добавить позволяет ещё добавлять поля с цветами автомобиля, выбранного в первом статическом поле. Максимальное количество полей с цветами 5. Если уже добавлено 5 полей то кнопка "Добавить" удаляется. Поля с цветами автомобилей можно удалять. Если полей с цветами стало меньше 5, то снова добаляем кнопку Добавить.

Если что-то не понятно - спросите поясню.

Извините, непонятно, что именно вам надо.

Пока я понял лишь следующее:.
1. Вы имеете два списка
2. Первый список статический - в нем модели автомобилей.
3. При выборе любого пункта в первом списке должен формироваться второй список - динамический , в котором появляются цвета этой конкретной модели автомобиля.

Далее - ничего не понятно.
Зачем вам кнопка с надписью "Добавить"?
Когда эта кнопка появляется? Или она всегда есть?
Что именно и куда она должна добавлять?

Напишете ПОНЯТНЫМ русским языком - помогу.

Почему добавляемая кнопка не работает?

if (items == 1){                  newitem5="<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\">";   newnode=document.createElement("span");     newnode.innerHTML=newitem5;         div.appendChild(newnode);                  }

И по прежнему не могу понять почему цикл не работает?!
Помогите решить эти 2 проблемы.

<html>  <head>  <title>Динамическое добавление группы полей по желанию пользователя</title>  <script type="text/javascript">  // Данные, как бы из базы, сформированные на стороне сервера.  // Обычно находятся в подключаемом JavaScript файле.  var colorsArray = {      BentleyAzure : {red:"Красный",green:"Зеленый"},      ChevroletCorvette : {black:"Черный",blue:"Синий"},      FerrariEnzo : {green:"Зеленый",black:"Черный",yellow:"Желтый"}  }  var items=0;  // Функция, заполняющая список цветами доступными для выбранной модели.   function getColors(_this){      var colors = colorsArray[_this.value];    div=document.getElementById("itemss");    items++;    if (items == 1){        newitem3="<span id=\"a" + items;        newitem3+="\">"+ _this.value;       newitem3+="<br></span>";       b('a0')       newnode=document.createElement("span");        newnode.innerHTML=newitem3;      div.appendChild(newnode); }       newitem1="<span id=\"a" + items;        newitem1+="\"><select id=\"colors"+ items;        newitem1+=" name=\"colors"+ items;        newitem1+=">";        //цикл почему-то не работает добавляют не все цвета определённого автомобиля, а только второй.          for ( var i in colors )              {              newitem1+="<option value=\"" + i;              newitem1+=">"+colors[i];              newitem1+="</option>";              }        newitem1+="</select><br></span>";      newnode=document.createElement("span");      newnode.innerHTML=newitem1;      div.appendChild(newnode);  //    Добавляем кнопку с помощью которой добиваемся диначности полей с цветами    if (items == 1){                 newitem5="<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\">";  newnode=document.createElement("span");    newnode.innerHTML=newitem5;        div.appendChild(newnode);                 }       }  function AddItem() {    if (items >= 5)      return;    div=document.getElementById("itemss");    items++;        newitem1="<span id=\"a" + items;        newitem1+="\"><select id=\"colors"+ items;        newitem1+=" name=\"colors"+ items;        newitem1+=">";          for(var i in colors)              {              newitem1+=" <option value=\"" + i;              newitem1+=">"+colors[i];              newitem1+="</option>";              }        newitem1+="</select>";        newitem1+="<a href=\"#\" onclick=\"a('a"+ items;        newitem1+="')\">удалить</a><br></span>";    newnode=document.createElement("span");    newnode.innerHTML=newitem1;        div.appendChild(newnode); if (items == 4){                 document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\"  onClick=\"AddItem();\" ID=\"add\" class=\"b\">";                 }  if (items == 1){                 document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\"  onClick=\"AddItem();\" ID=\"add\" class=\"b\">";                 }   if (items == 5){    b('add')  }  }  function a(x){  r=document.getElementById(x);  r.parentNode.removeChild(r);  items=items-1;  if (items == 4){  document.getElementById("itemss").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\"  class=\"b\">";        }  }  function b(x){  r=document.getElementById(x);  r.parentNode.removeChild(r); }  </script>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>  <body>  <form name="form1">  <span id='a0'>  <select id="models" name="models" onchange="getColors(this);">    <option value="BentleyAzure">Bentley Azure</option>    <option value="ChevroletCorvette">Chevrolet Corvette</option>    <option value="FerrariEnzo">Ferrari Enzo</option>  </select>  </span>  <div ID="itemss">  </div>  <INPUT TYPE="TEXT" ID="it" NAME="tema" SIZE="75" MAXLENGTH="70"></TD>  </form>  </body>  </html>