1

Вообщем, делаю форму на HTML, CSS и JS для веб приложения "To Do List", но у меня не получается сделать динамически расширяемый блок с задачами. То есть я сделал поле для ввода новой задачи и кнопку "Добавить" и задача добавляется, только при вводе новой заменяется, но мне нужно чтобы в списке задач генерировались новые задачи и список расширялся по мере того, как мы добавляем новые задачи. Помогите, пожалуйста :3

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ToDo List</title>

  <script src="eel.js"></script>
  <script src="main.js" type="text/javascript"></script>
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="wrapper">
    <h1>Список дел</h1>
        <div id="add">
            <form>
            <input type="text" value="" name="" id="txt1">
            <input type="button" value="Добавить" onclick="butt();">
            </form>
        </div>
    </div>
    <div id="txt2"></div>
</body>
</html>

CSS:

body {
    background: #c2e59c; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #c2e59c, #64b3f4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: "Roboto", sans-serif;
    }

#txt2 {
    margin-top: 60px;
    margin-right: 40px;
    font-family: "Roboto", sans-serif;
}

JS:

function butt(){
document.getElementById("txt2").innerHTML=document.getElementById("txt1").value;
 };

Заранее больное спасибо!)

1
  • innerHTML содержит html. Когда вы пишите innerHTML = 3, вы заменяете весь html на 3. В вашем случае правильно будет писать innerHTML += или использовать appendChild()
    – kertAW
    20 янв 2021 в 6:45

1 ответ 1

1

function butt() {
  let cont = document.querySelector(".container");
  let item = document.createElement("div");
  item.className = 'txt2';
  item.textContent = document.getElementById("txt1").value;
  cont.appendChild(item);
}
body {
  background: #c2e59c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #c2e59c, #64b3f4);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Roboto", sans-serif;
}

.txt2 {
  margin-top: 15px;
  margin-right: 10px;
  font-family: "Roboto", sans-serif;
}
<div class="wrapper">
  <h1>Список дел</h1>
  <div id="add">
    <form>
      <input type="text" value="" name="" id="txt1">
      <input type="button" value="Добавить" onclick="butt();">
    </form>
  </div>
</div>
<div class="container"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.