0

I am trying to create a notes app where the user can press a button, type text, which will spawn a box consisting of the text, which can be stretched and dragged around the screen. The part I am having trouble on is when the button is pressed and the text is inserted, the first div will spawn, but the child div isn't being spawned properly and acts strange.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Filler/Style.css">
</head>
<body>
    
    <button type="button" id="button">Add Filler</button>

<script src="Sketch.js"></script>
<script src="Filler/Sketch.js"></script>
<script src="Sidebar/Sketch.js"></script>
</body>
</html>

CSS

#mydiv {
    position: absolute;
    background-color: pink;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    z-index: 4;

    /* div able to be resised and scroll bar will be added if contents is too long .hidden*/
    resize: both;
    overflow: scroll;

    /* create rounded borders */
    border-radius: 15px;
    -moz-border-radius: 15px;
    text-align: center;
}

#mydivheader {
    cursor: move;
    z-index: 10;
}

Javascript

var myButton = document.getElementById("button");

myButton.addEventListener("click", clicked);


function clicked(){
    const content = prompt("Div Contents");
    const div = document.createElement('div');
    const div2 = document.createElement('div');

    div.id = "mydiv";
    div.textContent = content;

    div2.id = "mydivheader";
    div2.style = "width: 100%; height: 15px;";
    div2.textContent = content;

    document.body.append(div);
    div.appendChild(div2);
}
S Pro
  • 1
  • 1
  • try `appendChild` first before `append` to the body `div.appendChild(div2); document.body.append(div);`. – Layhout Dec 29 '22 at 08:14
  • Your question is not clear enough. Can you give a code example of what your html is supposed to look like when the elements are appended? – era-net Dec 29 '22 at 08:26
  • check this https://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically – Saima Haji Dec 29 '22 at 09:08

1 Answers1

0

i didn't understood ur question properly. is that the problem with content being generated twice. like one inside the parent div and another inside the child. if so try this

function clicked(){
const content = prompt("Div Contents");
const div = document.createElement('div');
const div2 = document.createElement('div');

div.id = "mydiv";

div2.id = "mydivheader";
div2.style = "width: 100%; height: 15px;";
div2.textContent = content;

document.body.append(div);
div.appendChild(div2);

}

Hamdan Salih
  • 60
  • 8