How to create element within for loop in Javascript

Question

I have one text box and one button in my code. I want to let the user to enter a text and click the button. If so a card will be created with the user entered text, and the background color of the card will be set using a json file. But in my code if the user clicks the button for the second time, previously created card disappears and a new card is being created leaving the space of previously created card. But I want all the cards to be aligned one below one. I think this can be done using a loop function by setting different ids to each card. Unfortunately I am not able to do it properly. I am attaching my code here, please someone help me with this.

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(); 
})

the0val · Accepted Answer · 2019-12-25 11:59:27Z

2

Each time you create a new element you give it the id of card. You can't have multiple html elements with the same id. You should use crd.setAttribute("class", "card");' instead. The external stylesheet you load has styling for the class .card but not for id #card.

answered Dec 25, 2019 at 11:59

the0val

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SOHAIB NISAR · Accepted Answer · 2019-12-25 12:24:00Z

1

You can not give id to more one html tag. Instead of id use class attribute i.e.

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

answered Dec 25, 2019 at 12:24

SOHAIB NISAR

811 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to create element within for loop in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related