Problems by adding elements in a div via javascript

Question

I'm working on a upload formula, where the user can click on a "add" button, a "select file button" and a "title field" will show up then.

If the user clicks again on the "add button", a new button and field show up and so on and so forth.

My problem: I need those elements in a div, to be able to style and change them a bit.

Adding the elements do work but for a reason, adding a div doesn't work, and haven't figured out, what do to.

Here is my code:

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

  <body>

    <div id="media">
      <form>
        <div>
          <div id="container">&nbsp;</div>
          <input type="button" value="add" id="add" />
        </div>
      </form>
    </div>


  </body>

JavaScript Code

  <script>
    window.addEventListener("load", function()
    {
      document.getElementById("add").addEventListener("click", function()
      {
        // Create a div
        var container = document.createElement("div");
        container.setAttribute("class", "new_container[]");

        // Create a file input
        var file = document.createElement("input");
        file.setAttribute("type", "file");
        file.setAttribute("name", "sel_ad_file[]");

        // Create a break
        var br = document.createElement("br");

        // Create a text input
        var text = document.createElement("input");
        text.setAttribute("type", "text");
        text.setAttribute("name", "ad_file_title[]");
        text.setAttribute("placeholder", "File Title");


        // add the file and text to the div
        container.appendChild(file);
        container.appendChild(br);
        container.appendChild(text);

        //Append the div to the container div
        document.getElementById("media").appendChild(container);
      });
    });
  </script>

CSS Code

<style>
* {margin: 0; padding: 0; font-family: ubuntu;}    
body
{
  overflow: hidden;
  background-color: rgba(75,75,75);
  z-index: -10;
}
#media
{
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: rgba(30,30,30);
  float: left;
}
#media input[type="button"]
{
  width: 75px;
  height: 25px;
  top: 5px;
  left: 355px;
  position: absolute;
  color: orange;
  border-style: none;
  background-color: rgba(40,40,40);
  cursor: pointer;
}
#media input[type="button"]:hover
{
  background-color: rgba(50,50,50)
}
.new_container
{
  width: 250px;
  height: 250px;
  top: 0px;
  left: 0px;
  background-color: rgba(35,35,35);
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  float: left;
}
.new_container input[type="file"]
{
  width: 90%;
  height: 25px;
  transform: translate(-50%, -50%);
  background-color: orange;
  border-style: none;
  position: absolute;
  top: 0px;
  left: 50%;
  margin: 0px;
  padding: 0px;
  z-index: 2;
}
.new_container input[type="text"]
{
  width: calc(90% - 10px);
  height: 25px;
  background-color: rgba(35,35,35);
  border-style: none;
  transform: translate(-50%, -50%);
  border: solid 1px rgba(255,255,255,.5);
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  position: relative;
  top: 150px;
  left: 50%;
  margin: 0px;
  padding: 0px;
  z-index: 2;
}
</style>

. . .

</html>

        window.addEventListener("load", function()
        {
          document.getElementById("add").addEventListener("click", function()
          {
            // Create a div
            var container = document.createElement("div");
            container.setAttribute("class", "new_container[]");

            // Create a file input
            var file = document.createElement("input");
            file.setAttribute("type", "file");
            file.setAttribute("name", "sel_ad_file[]");

            // Create a break
            var br = document.createElement("br");

            // Create a text input
            var text = document.createElement("input");
            text.setAttribute("type", "text");
            text.setAttribute("name", "ad_file_title[]");
            text.setAttribute("placeholder", "File Title");


            // add the file and text to the div
            container.appendChild(file);
            container.appendChild(br);
            container.appendChild(text);

            //Append the div to the container div
            document.getElementById("media").appendChild(container);
          });
        });

    * {margin: 0; padding: 0; font-family: ubuntu;}
    /*----------------------------------------------------------------------------*/
    body
    {
      overflow: hidden;
      background-color: rgba(75,75,75);
      z-index: -10;
   }
    /*============================================================================*/
    #media
    {
      width: 350px;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
      background-color: rgba(30,30,30);
      float: left;
    }
    #media input[type="button"]
    {
      width: 75px;
      height: 25px;
      top: 5px;
      left: 355px;
      position: absolute;
      color: orange;
      border-style: none;
      background-color: rgba(40,40,40);
      cursor: pointer;

    }
    #media input[type="button"]:hover
    {
      background-color: rgba(50,50,50)
    }
    .new_container
    {
      width: 250px;
      height: 250px;
      top: 0px;
      left: 0px;
      background-color: rgba(35,35,35);
      position: absolute;
      z-index: 1;
      border-radius: 10px;
      float: left;
    }
    .new_container input[type="file"]
    {
      width: 90%;
      height: 25px;
      transform: translate(-50%, -50%);
      background-color: orange;
      border-style: none;
      position: absolute;
      top: 0px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }
    .new_container input[type="text"]
    {
      width: calc(90% - 10px);
      height: 25px;
      background-color: rgba(35,35,35);
      border-style: none;
      transform: translate(-50%, -50%);
      border: solid 1px rgba(255,255,255,.5);
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      position: relative;
      top: 150px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }

    <html>
      <head>
        <title>TEST1</title>
  	    <meta charset="UTF-8"/>
      </head>

      <body>

        <div id="media">
          <form>
            <div>
              <div id="container">&nbsp;</div>
              <input type="button" value="add" id="add" />
            </div>
          </form>
        </div>


      </body>
    </html>

What is the problem? If I run the code snippet, and click the "add" button, it seems to work as intended. Are you trying to add all these file input containers into a new div (instead of appending them to the #media div)? — jessegavin
– jessegavin, Commented Oct 2, 2018 at 16:09
i want those 2 elements in a class div called "new_container", so by clicking on the "add button", there should also created a new div, but if i want style the "new_container" and the elements inside, it doesn't work. There maybe went something wrong with the "setAttribute". — user10235329
– user10235329, Commented Oct 2, 2018 at 16:15

Ruzihm · Accepted Answer · 2018-10-02 16:16:04Z

Your problem is that the div's class doesn't match the css class meant for it.

Removing [] from the strings in your setAttribute parameters, allows for the divs to be styled appropriately.

Removing the position:absolute; from the .newcontainer and its children's css prevents them from (mostly) stacking on top of each other.

Then, removing the transform: translate(-50%, -50%); from the file input allows them to be completely visible instead of half of them being hidden on the left side of the screen.

After these edits, the divs and their inputs are pretty plainly visible.

I then removed overflow: hidden; from body css, so that when too many divs are created to fit on the screen/frame, you can see them and confirm that they are all there.

window.addEventListener("load", function()
        {
          document.getElementById("add").addEventListener("click", function()
          {
            // Create a div
            var container = document.createElement("div");
            container.setAttribute("class", "new_container");

            // Create a file input
            var file = document.createElement("input");
            file.setAttribute("type", "file");
            file.setAttribute("name", "sel_ad_file");

            // Create a break
            var br = document.createElement("br");

            // Create a text input
            var text = document.createElement("input");
            text.setAttribute("type", "text");
            text.setAttribute("name", "ad_file_title");
            text.setAttribute("placeholder", "File Title");


            // add the file and text to the div
            container.appendChild(file);
            container.appendChild(br);
            container.appendChild(text);

            //Append the div to the container div
            document.getElementById("media").appendChild(container);
          });
        });

* {margin: 0; padding: 0; font-family: ubuntu;}
    /*----------------------------------------------------------------------------*/
    body
    {
      background-color: rgba(75,75,75);
      z-index: -10;
   }
    /*============================================================================*/
    #media
    {
      width: 350px;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
      background-color: rgba(30,30,30);
      float: left;
    }
    #media input[type="button"]
    {
      width: 75px;
      height: 25px;
      top: 5px;
      left: 355px;
      position: absolute;
      color: orange;
      border-style: none;
      background-color: rgba(40,40,40);
      cursor: pointer;

    }
    #media input[type="button"]:hover
    {
      background-color: rgba(50,50,50)
    }
    .new_container
    {
      width: 250px;
      height: 250px;
      top: 0px;
      left: 0px;
      background-color: rgba(35,35,35);
      z-index: 1;
      border-radius: 10px;
      float: left;
    }
    .new_container input[type="file"]
    {
      width: 90%;
      height: 25px;
      background-color: orange;
      border-style: none;
      top: 0px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }
    .new_container input[type="text"]
    {
      width: calc(90% - 10px);
      height: 25px;
      background-color: rgba(35,35,35);
      border-style: none;
      transform: translate(-50%, -50%);
      border: solid 1px rgba(255,255,255,.5);
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      position: relative;
      top: 150px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }

<html>
      <head>
        <title>TEST1</title>
  	    <meta charset="UTF-8"/>
      </head>

      <body>

        <div id="media">
          <form>
            <div>
              <div id="container">&nbsp;</div>
              <input type="button" value="add" id="add" />
            </div>
          </form>
        </div>


      </body>
    </html>

but the brackets in "file.setAttribute("name", "sel_ad_file[]");" and in "text.setAttribute("name", "ad_file_title[]");" have to be in the code, or i can't upload the files to the database, but i removed the brackets in "container.setAttribute("class", "new_container");"

Collectives™ on Stack Overflow

Problems by adding elements in a div via javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related