Я создаю базу данных рецептов для себя (просто для изучения программирования), и я настроил базовую страницу с помощью bootstrap, python, flask и sqlalchemy. Я добавил ингредиенты в базу данных, и она работает нормально. Теперь я могу создавать рецепты (другой db.class ) добавьте эти ингредиенты и соедините их в соответствии с их количеством. Я подготовил форму для настройки всех необходимых входных данных.

Для ингредиентов я хочу иметь выпадающий список со всеми ингредиентами, доступными в БД (готово и работает, см. Ниже). Теперь я хочу динамически добавлять элементы выше в контейнер, выбирая выпадающий элемент. Я сначала добавляю статические элементы, и это работает — когда я использую «onclick». Это то, что у меня есть до сих пор:

HTML выпадающего списка:

 <div id="container">
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Ingredient</label>
    <div class="col-sm-2"><input
    type="text"
    class="form-control"
    id="amount"
    name="amount">
    </div>
    <label for="amount" class="col-sm-1 col-form-label">g / ml</label>
    <div class="dropdown col-sm-2">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="addIngredient()">
        Choose Ingredient
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            {% for ingredient in ingredients %}
            <a class="dropdown-item" href="#">{{ ingredient.name }}</a>
            {% endfor %}
        </div>
    </div>
</div>
 

Это javascript, который я вызываю:

 function addIngredient() {
  var container = document.getElementById("container");

  var div_outer = document.createElement("div");
  div_outer.setAttribute("class","form-group row");
  container.appendChild(div_outer);

  var label = document.createElement("label");
  label.innerHTML = "Test";
  label.setAttribute("class","col-sm-2 col-form-label");
  div_outer.appendChild(label);

  var div_inner = document.createElement("div");
  div_inner.setAttribute("class","col-sm-2");
  div_outer.appendChild(div_inner);

  var input = document.createElement("input");
  input.innerHTML = "Amount";
  input.setAttribute("class","form-control");
  div_inner.appendChild(input);

  var label_unit = document.createElement("label");
  label_unit.innerHTML = "g (ml)";
  label_unit.setAttribute("class","col-sm-1 col-form-label");
  div_outer.appendChild(label_unit);

  var delete_btn = document.createElement("button");
  delete_btn.setAttribute("type", "button");
  delete_btn.setAttribute("class", "close");
  delete_btn.setAttribute("onclick", "");
  div_outer.appendChild(delete_btn)

  var span = document.createElement("span");
  span.setAttribute("aria-hidden", "true");
  span.innerHTML = "amp;times;"
  delete_btn.appendChild(span)
}
 

В качестве первого шага я хотел заменить текст «label» на выбор выпадающего списка с помощью этого:

 //Getting Value
var selObj = document.getElementById("Dropdown");
var selValue = selObj.options[selObj.selectedIndex].value;
    
//Setting Value
label.innerHTML = selValue;
 

Вопрос 1: Но как только я меняю событие с «onclick» на «onchange», оно перестает работать. Почему?

Вопрос 2: Как я могу сделать так, чтобы созданные элементы можно было идентифицировать с помощью уникального идентификатора, чтобы я мог использовать текст метки для идентификации идентификатора ингредиента и добавления их в класс рецептов. Как я могу сгенерировать этот идентификатор?

К сожалению, я пока не очень разбираюсь в Java или HTML, но я стараюсь учиться 🙂

Вопрос 1:

Атрибут onchange срабатывает в момент изменения значения элемента.

Совет: Это событие похоже на событие oninput . Разница в том, что событие oninput происходит сразу после изменения значения элемента, в то время как onchange происходит, когда элемент теряет фокус. Другое отличие заключается в том, что событие onchange также работает с элементами.

Поэтому, если вы хотите, чтобы onchange был запущен, вам следует подумать о создании выпадающего списка с использованием <select> тега HTML.

Вопрос 2:

Вы можете легко получить идентификатор элемента, хранящийся в вашей базе данных, и установить его в атрибуте по вашему выбору.