为什么创建的元素在创建后立即从网站上消失?

问题描述 投票:0回答:1

输入后: 数字 文本(作为文本添加到 div 元素中) 选择(分区或部分)

单击“创建”按钮后

给定数量的 div 将出现在该部分中。

这种情况也会发生,但就像我说的那样,所有创建的 div 元素随后都会消失。

我多次更改代码但没有成功:(

//HTML
<!DOCTYPE html>
<html>
<head lang="de">
  <title>Kontaktlistenbeispiel</title>
  <link rel="stylesheet" href="mainWeek12Challenge6.css" >
</head>
<body>
  <form action="">
    <input type="number" name="elements" class="input" placeholder="Number Of Elements" />
    <input type="text" name="texts" class="input" placeholder="Elements Text" />
    <select name="type" class="input">
      <option value="Div">Div</option>
      <option value="Section">Section</option>
    </select>
    <input type="submit" name="create" value="Create" />
    <div class="results"></div>
  </form>

  <script src="main6.js"></script>
</body>
</html>

// JS
const formEl = document.querySelector('form');
const numberInputEl = document.querySelector('input[type="number"]');
const textInputEl = document.querySelector('input[type="text"]');
const resultSection = document.querySelector('.results');
const selectionEle = document.querySelector('select');
const containerEl = document.createElement(selectionEle.value);
containerEl.style.cssText = "display: flex; justify-content: center; gap:10px;";

formEl.addEventListener('submit', constructElements);

function constructElements() {
    const containerEl = document.createElement(selectionEle.value);
    containerEl.style.cssText = "display: flex; justify-content: center; gap:10px;";
    let i = 0;
    while(i < parseInt(numberInputEl.value)) {
        const currDiv = document.createElement('div');
        currDiv.className = 'newDiv';
        currDiv.textContent = textInputEl.value;
        containerEl.appendChild(currDiv);
        i++;
    }

    resultSection.appendChild(containerEl);
}
javascript forms submit createelement
1个回答
0
投票

我不知道你想做什么。可以说具体一点吗?

© www.soinside.com 2019 - 2024. All rights reserved.