如何在Javascript中的for循环中创建元素答案

【问题标题】：How to create element within for loop in Javascript如何在Javascript中的for循环中创建元素
【发布时间】：2019-12-25 11:31:40
【问题描述】：

我的代码中有一个文本框和一个按钮。我想让用户输入文本并单击按钮。如果是这样，将使用用户输入的文本创建卡片，并使用 json 文件设置卡片的背景颜色。但是在我的代码中，如果用户第二次单击该按钮，则先前创建的卡会消失，并且正在创建新卡，从而留下先前创建的卡的空间。但我希望所有的卡片都在一张下方对齐。我认为这可以通过为每张卡设置不同的 id 来使用循环函数来完成。不幸的是，我无法正确地做到这一点。我在这里附上我的代码，请有人帮助我。

index.html

    <!DOCTYPE html>
<html>
<head>
    <title>Task</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <link rel = "stylesheet" href = "css/style.css" type = "text/css">
</head>
<body>
    <h2>Creative Handle Task Assignment</h2>
    <input type="text" name="text" id="text" placeholder="Enter your text here...">
    <button id="btn">Click</button>
    <div class="flex-container" id="container">

    </div>
    <script src="js/custom_script.js" type="text/javascript"></script>
</body>
</html>

style.css

.flex-container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;

}

.flex-container > div {
    /*background-color: DodgerBlue;*/
    color: white;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

custom_script.js

const subBtn = document.getElementById("btn");
const inptTxt = document.getElementById("text");
const contDiv = document.getElementById("container");

subBtn.disabled = true

inptTxt.addEventListener('input', evt => {
  const value = inptTxt.value.trim()

  if (value) {
    inptTxt.dataset.state = 'valid'
    subBtn.disabled = false
  } else {
    inptTxt.dataset.state = 'invalid'
    subBtn.disabled = true
  }
})

var xhttp = new XMLHttpRequest();

subBtn.addEventListener("click",function(){
    var crd = document.createElement("div");
    crd.setAttribute("id", "card");
    crd.innerHTML = inptTxt.value;
    contDiv .appendChild(crd);
    xhttp.onreadystatechange=function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("card").style.background = JSON.parse(this.responseText).color;         
        }
    };
    xhttp.open("GET","http://api.creativehandles.com/getRandomColor","" ,true);
    xhttp.send(); 
})

【问题讨论】：

标签： javascript html css json

【解决方案1】：

每次您创建一个新元素时，您都会为其指定 ID card。您不能有多个具有相同 id 的 html 元素。您应该改用crd.setAttribute("class", "card");'。您加载的外部样式表具有类 .card 的样式，但没有 id #card 的样式。

【讨论】：

【解决方案2】：

您不能将 id 赋予多个 html 标签。而不是 id 使用类属性，即

crd.setAttribute("class", "card");

【讨论】：