Question

我的代码中有一个文本框和一个按钮。我想让用户输入文本并单击按钮。如果是这样，将使用用户输入的文本创建卡，并且将使用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(); 
})

Answer 1

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

Answer 2

您不能将ID赋予多个html标记。代替id使用class属性，即

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

如何在JavaScript中的for循环内创建元素

2 个答案: