Untitled

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">.


<body>
<div id="container"
<h1>Da</h1>
</div>

<div class="patrat">
<p>Nu</p>
</div>

<div class="patrat">
<p>Da</p>
</div>

<button onclick="Start()">Start</button>

<script>
var litere;
function apasareButon() {
    litere = document.getElementById("textarea").value;
    console.log(litere);
    for (let i = 0; i < litere.length; i++) {
        button.addEventListener("click", newPatrat(litere[i]));
    }
}
function newPatrat(c) {
    patrat = document.createElement("div");
    patrat.className = "patrat";
    patrat.id = "patrat";
    var container = document.getElementById("container");
    var text = document.createTextNode(c);
    var stil = window.getComputedStyle(container,null);
    var w = parseInt(stil.getPropertyValue("width")) / 3;
    var h = parseInt(stil.getPropertyValue("height")) / 3;
    patrat.style.width = toString(w);
    patrat.style.height = toString(h);
    console.log(w);
    console.log(h);
    console.log(patrat.style.width);
    console.log(patrat.style.height);
    patrat.appendChild(text);
    container.appendChild(patrat);
}
function newTextarea() {
    var t = document.createElement("textarea");
    t.rows = "5";
    t.cols = "20";
    t.id = "textarea";
    document.body.appendChild(t);
}
function newButton() {
    var button = document.createElement("input");
    button.type = "button";
    button.id = "button";
    button.value = "Start";
    document.body.appendChild(button);
    button.addEventListener("click", apasareButon, false);

}

window.onload = function () {
    newTextarea();
    newButton();

}

</script>


</body>
</html>