I want to create a dynamic menu tree in which a child node can be added by clicking any node (whenever you click a node a dialogue box should open to enter a new child node). Whatever the user enters in the this text box, should get added to the tree.
image of what I want to implement
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="author" content="" />
<title>To do list</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.btn{
width: 80px;
height: 80px;
text-align: center;
padding: 6px 0;
font-size: 12px;
border-radius: 55px;
}
</style>
</head>
<body>
<div class="container" style="margin-top:40px;">
<div style="text-align:center" >
<input type="button" value="Menu Root" class="btn btn-primary" onclick="foo(this)" id="root">
</div>
</div>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/plugins/bootstrap.js"></script>
<script src="myscript.js"></script>
</body>
</html>
JS: myscript.js
function foo(e)
{
var node = prompt("Enter node name: ", "Node");
if (node != null)
{
var curr_node = document.getElementById(e.id); //get clicked button (parent)
var div = document.createElement("DIV");
var btn = document.createElement("INPUT");
btn.setAttribute("type", "button");
btn.setAttribute("id",Math.random().toString(36).substring(7)); //assign random id
btn.setAttribute("value", node);
btn.setAttribute("class","btn btn-primary");
btn.setAttribute("onclick","foo(this)");
div.appendChild(btn); //add child btn to div
curr_node.appendChild(div); //add child div to parent btn
}
}
I am not getting ny results on my browser nor in console. What's the problem and how should I resolve it?
