AV5 Zadaca4

//HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='script.js'></script>
</head>


<body>
<div>
    <label>Number of elements:</label>
    <input type="number" id="number">
</div>

<div>
    <label>Type: </label>
    <select id="type">
        <option value="Checkbox">Checkbox</option>
        <option value="Radio">Radio</option>
    </select>
</div>

<div>
    <input type="button" value="Add" id="generate" onclick="generateForm()";>
</div>

<div id="container">

</div>
</body>
</html>

//CSS
label{
    display: inline-block;
    width: 100px;
}
div{
    margin-bottom: 5px;
}
input[type=button]
{
    width:265px;
}
table , td , th{
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}


//JS
function generateForm()
{
    var number=parseInt(document.getElementById('number').value);
    var kind=document.getElementById('type').value;

    var container=document.getElementById('container');
    container.innerHTML="";

    for(var i=0;i<number;i++)
    {
        var element=document.createElement('input');
        element.setAttribute('type', kind);
        var text=document.createTextNode(i);
        container.appendChild(element);
        container.appendChild(text);

    }
}