my use case : create tab like experience. clicking on add button creates a (horz tab button) and a corresponding div, which is linked via onclick listener, dynamically.
problems :
on clicking add button, values from previous tabs are reset (which is obvious wrt to the way $tabs_prev & $menu_prev is populated) and
their respective js goes away (which I can't understand, why?)
a remove tab implementation (because the way I've coded these tabs, removing a tab and corresponding div isn't really simple, so, any clues in this direction, maybe?)
code : fiddle : http://jsfiddle.net/g58fzs75/1/
HTML:
<body>
<input id="hidden" type="hidden" value="1"></input>
<div id="template_tabBtn" style="display:none">
<input type="button" value="add" onclick="addTab()"></input>
</div>
<ul id="menu">
</ul>
<div id="tabs">
</div>
<div id="template_tabBar" style="display:none">
<li>
<input type="button" id="tab_btn" class="template_tabBar" value="Tab" onclick="tabClick(this)"></input>
</li>
</div>
<div id="template_tabs" style="display:none">
<div id="tabs" class="template_tabs tab_div" value="1">
<input type="text" id="txt" class="template_tabs" value="alert"></input>
<input type="button" id="btn" class="template_tabs" value="alert"></input>
</div>
</div>
</body>
CSS:
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li input {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li input:hover {
background-color: orange;
}
</style>
jQuery :
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script>
$tabs_prev = "";
$menu_prev = "";
$add_btn = "";
$current_tabID = "";
function tabClick(id) {
showCurrent($(id).attr('id'));
}
function addTab() {
var tabCount = parseInt($('#hidden').val()) + 1;
$('#hidden').val(tabCount);
run(tabCount);
showCurrent($('#tabs-' + tabCount).attr('id'));
}
$(document).ready(function() {
$add_btn = "<li>" + $('#template_tabBtn').html() + "</li>";
run(1);
});
function run(tabCount) {
//$tabs_prev += main($('#template_tabs'),tabCount);//alert("tabs\n"+$tabs_prev);
$menu_prev += main($('#template_tabBar'), tabCount); //alert("menu\n"+$menu_prev);
$('#tabs').html($('#tabs').html() + main($('#template_tabs'), tabCount));
$('#menu').html($menu_prev + $add_btn);
logic(tabCount);
}
function main(target, tabCount) {
$htmlBackup = $(target).html();
$('.' + $(target).attr('id')).each(function() {
$(this).attr('id', $(this).attr('id') + "-" + tabCount).removeClass($(target).attr('id'));
$(this).attr('value', $(this).attr('value') + "-" + tabCount);
});
$html = $(target).html();
$(target).html($htmlBackup);
return $html;
}
function logic(tabCount) {
$('#btn-' + tabCount).click(function() {
alert($('#txt-' + tabCount).val());
});
}
function showCurrent(current_id) {
$('.tab_div').each(function() {
var id = $(this).attr('id');
var id_num = id.substr(id.lastIndexOf('-') + 1, id.length);
var current_id_num = current_id.substr(current_id.lastIndexOf('-') + 1, current_id.length);
if (id_num == current_id_num) {
$("#tabs-" + id_num).show();
$('#tab_btn-' + id_num).css({
"background-color": "orange"
});
} else {
$("#tabs-" + id_num).hide();
$('#tab_btn-' + id_num).css({
"background-color": "black"
});
}
});
}
</script>
The reason why your javascript is disappearing is because resetting the innerHTML deletes the onclick handlers on the elements. Why: the original elements are destroyed, including references to events and new elements are created.
The code responsible for this:
$('#tabs').html($('#tabs').html() + main($('#template_tabs'), tabCount));
Please use jQuery's appending of an element by cloning the template tab:
$('#tabs').append($('#template_tabs').clone(true));
Append appends htmlstrings or elements to an parent element. It's a buffed up version of the documents native 'appendChild'.
clone clone the template element (makes a copy). You can do this in your function main and return it to the append function.
function main(tabCount)
{
var node = $('#template_tabs').clone(true));
//do things with the node, like setting an onclick handler, or id.
//example
node.setAttribute("id", "tab" + tabCount);
}
Removing can be done also:
function removeNode(node)
{
//provide a node via jQuery
//example: removeNode($("#tab2")) <-- now tab2 will be removed from the DOM.
node.remove();
}
Related
I have two click functions, one function is for adding vacation in a list, the other function is for removing vacation from the list. When I add vacation to the list, I don't want to be able to click on that specific button again .ledig-btn. If I remove a specific vacation from the list, then I want to be able to click that .ledig-btn again. I have tried with jQuery(this).off('click'); and Its working, but then when I remove vacation from the list I want to add the click event again.
jQuery(".ledig-btn").on('click', function(event) {
var id = jQuery(this).attr('id');
jQuery(this).unbind("click");
jQuery('.minlista').append('<tr><td><div class="list-domains" data-id='+id+'><span class="delete-list-domains">X</span>' + '<td class="tld-sok">' + searchWord + '<div class="tld-sok-ilista">' + domain + '</div>' + '</td>' + '</div></td></tr>');
event.stopImmediatePropagation();
jQuery("tr td .list-domains").on('click', function(e) {
var delRow = jQuery(e.target).closest('tr');
delRow.remove();
});
});
According to your script, you're storing the button id as a data-attribute called data-id, so we can use it as follow:
function myClickHandler(event) {
var id = $(this).attr('id');
$(this).off("click");
// +--- Data attribute with the
// | related 'ledig-btn'
// v
$('.minlista').append('<tr><td><div class="list-domains" data-id='+id+'><span class="delete-list-domains">X</span>' + '<td class="tld-sok">' + searchWord + '<div class="tld-sok-ilista">' + domain + '</div>' + '</td>' + '</div></td></tr>');
event.stopImmediatePropagation();
$("tr td .list-domains").on('click', function(e) {
var ledigBtnId = $(this).data('id'); // ledig-btn ID
var delRow = $(e.target).closest('tr');
delRow.remove();
// Here we re-bind the click event handler.
$("#" + ledigBtnId).on("click", myClickHandler);
});
}
$(".ledig-btn").on('click', myClickHandler);
Instead of adding/removing the click event on items, you could register a single handler onto a common ancestor using event delegation, then just check the clicked item hasn't already been added to the 2nd list, with the help of the id attribute and the data-id you use.
Here is a simplified demo:
jQuery("#available").on('click', '.ledig-btn', function(event) {
var btn = jQuery(this), item = btn.closest('div'), id = item.attr('id');
if ($('#added').find('[data-id="'+id+'"]').length){
alert('Item already added to the list.');
return;
}
jQuery('.minlista').append(`
<tr>
<td>
<div class="list-domains" data-id=`+id+`>
<span class="delete-list-domains">×</span>
</div>
</td><td class="tld-sok">` + item.text().replace('Add','')
+ '<div class="tld-sok-ilista">Some dynamic content</div></td></tr>'
).find(".list-domains").last().on('click', function(e) {
jQuery(e.target).off('click').closest('tr').remove();
});
event.stopImmediatePropagation();
});
#available, #added{float:left; width:50%; box-sizing: border-box; border: 1px solid black;
margin: 2px; min-height: 10px}
#available div{clear:both; vertical-align: middle}
#available button{float: right}
.delete-list-domains{cursor: pointer; padding:2px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
</p>
<div id="available">
<div id="v1" class="vacation">Vacation 1<button class="ledig-btn">Add</button></div>
<div id="v2" class="vacation">Vacation 2<button class="ledig-btn">Add</button></div>
<div id="v3" class="vacation">Vacation 3<button class="ledig-btn">Add</button></div>
</div>
<div id="added">
<table><tbody class="minlista">
</tbody></table>
</div>
I am new in HTML and jQuery, and this was my first implementation, and I am not sure it's correct, I need your help, I tried to make simple counter to begin counting per click, and to store the results in localStorage, this is all I could do
but it didn't work, may you tell me what I've done wrong?
Thanks
$(function() {
$('.container li').click(function() {
var btn = $(this).attr("data-page");
var element = $('.counter[data-page="' + btn + '"]').html();
element++
$('.counter[data-page="' + btn + '"]').html(element);
localStorage.setItem('save', $('.counter[data-page="' + btn + '"]').html());
if (localStorage.getItem('save')) {
$('.counter[data-page="' + btn + '"]').html(localStorage.getItem('save'));
}
});
});
ul {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
background: blue;
color: #fff;
padding: 10px;
}
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<li data-page="facebook">
4100
</li>
<li data-page="twitter">
4100
</li>
</ul>
You need to init first your buttons with values from localStorage. Then you don't need to retrieve them again, you just need to manipulate the value inside the html and to set the new counter in the localStorage.
Also you need to have one counter by button in your localStorage
// Just to make this snippet work,
// because localStorage is forbiden here
// database = localStorage
database = {
store: {},
getItem: function(key) {
return this.store[key];
},
setItem: function(key, val) {
this.store[key] = val;
},
}
$(function() {
$(".counter").each((_, element) => {
const $btn = $(element);
const key = `save-${$btn.attr("data-page")}`;
$btn.html(database.getItem(key) || 0);
});
$(".container li").click(function() {
const $btn = $(this).find(".counter");
const key = `save-${$btn.attr("data-page")}`;
const counter = (+$btn.html()) + 1;
$btn.html(counter);
database.setItem(key, counter);
});
});
ul {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
background: blue;
color: #fff;
padding: 10px;
}
ul li {
display: inline-block;
}
<ul class="container">
<li data-page="facebook">
4100
</li>
<li data-page="twitter">
4100
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to load the data from the local storage when the page loads. Right now it only loads after saving, which has no effect.
Each element is also saving to the same part of the local storage, so they will be the same every time the page loads. You need to save to an index based on the data-page.
Here you go with one more solution https://jsfiddle.net/thrh78u0/
$(function() {
$('.container li').click(function() {
var btn = $(this).attr("data-page");
var element = $('.counter[data-page="' + btn + '"]').html();
element++
$('.counter[data-page="' + btn + '"]').html(element);
localStorage.setItem('save' + btn, element);
if (localStorage.getItem('save')) {
$('.counter[data-page="' + btn + '"]').html(localStorage.getItem('save'));
}
});
});
ul {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
background: blue;
color: #fff;
padding: 10px;
}
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<li data-page="facebook">
4100
</li>
<li data-page="twitter">
4100
</li>
</ul>
Hope this will help you.
Try this simple one:
$('.container li').click(function() {
if (localStorage.count) {
localStorage.count++
} else {
localStorage.count = 1;
}
})
Updated script using different variables for different counters. It loads counters values from localStorage or sets them to 0 if not available. It also uses two separate variables to store the values.
I used your code so you can see what is different and what you missed in your solution
$(function() {
var cntfb = localStorage.getItem('save-facebook');
$('.counter[data-page="facebook"]').html(cntfb ? cntfb : 0);
var cnttw = localStorage.getItem('save-twitter');
$('.counter[data-page="twitter"]').html(cnttw ? cnttw : 0);
$('.container li').click(function() {
var btn = $(this).attr("data-page");
var element = $('.counter[data-page="' + btn + '"]').html();
element++;
$('.counter[data-page="' + btn + '"]').html(element);
localStorage.setItem('save-' + btn, $('.counter[data-page="' + btn + '"]').html());
if (localStorage.getItem('save-' + btn)) {
$('.counter[data-page="' + btn + '"]').html(localStorage.getItem('save-' + btn));
}
});
});
I have a DOM like this, when i fill the input field and click the button i need to create a textarea element and and stored the input value there.
if i click multiple times create multiple textarea and multiple ID's, How can i do this please check my code, Best answers must be appreciated
$('#note').on('click', function(){
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
});
.full-width.note_cover {
float: left;
margin-bottom:15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div><!-- #content_bag -->
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>
Your code is working fine, just put storedNoteVal in text-area, and input won't generate any text-area if its blank.
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
if(storedNoteVal){
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>');
//$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
}
});
.full-width.note_cover {
float: left;
margin-bottom: 15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div>
<!-- #content_bag -->
<div>
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>
</div>
Building on Abhinshek answer -
Your code actually reassign id's to the textareas, since you loop through all the elements after prepending them.
You could define count_id as a window variable (outside the click function) and then just use it.
Also, you don't need to wrap noteCov with $() since $('.note_cover') returns a jQuery objects array
var count_id = 1;
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId_'+count_id+'"><textarea>' + storedNoteVal + '</textarea></div>');
count_id++;
});
This way each textarea gets it's own unique id that doesn't change
There a lot of similar questions and I've looked at a lot of them, but couldn't figure out or find one that addressed this problem.
The issue is I'm trying to apply event listeners to a particular class (success for the most part), and each of those classes have their own elements with a separate class.
group.addEventListener("click", toggle, false);
group is a class which will have the click event.
function toggle() {
var contents = this.getElementsByClassName('content');
for (i = 0; i < contents.length; i++) {
if (contents[i].style.display == "block") {
contents[i].style.display = "none";
}
else {
contents[i].style.display = "block";
}
}
}
contents is another class nested within group. There will be a lot of contents, but only a handful of group.
Using .addEventListener works, but the click event for it expands/collapses every contents, not just the ones under that particular group which is what I want. I click on any one of the group and all of the contents on the page will expand/collapse. How can I fix this? By the way, these are just snippets of the code (it's a lot to post). I tried to use this to provide scope, but I'm just doing it wrong since it's producing the same results anyway. Thank you in advance.
Edit:
More about the HTML
group.innerHTML += String.format("<div class='group' style='display: block;'>" +
"<h3 style='display: inline-block; color: #000; margin: 0px; padding: 0px;'>{0}</h3>" +
"<img src='https:\/\/my.blah.com\/_layouts\/15\/images\/ecbarw.png' style='margin: 5px;' alt='Click to expand-collapse.' />" +
"{1}</div>", trimmedKey, groups[key]);
group.addEventListener("click", toggle, false);
I'm using this for a SharePoint web part. It's within display templates so that's why there's a lot of unrelated code to post, but I'll include the relevant HTML for group and contents.
var content = String.format('<div class="content" style="display: none; margin: 30px 0px;"><span id="{0}" class="ms-srch-item-title">' +
'<h3 class="ms-srch-ellipsis">{1}</h3>' +
'</span>' +
'<span style="margin-right: 10px;"><span style="font-weight:bold;">Assigned To: </span>{2}</span>' +
'<span style="margin-right: 10px;"><span style="font-weight:bold;">Due Date: </span>{3}</span>' +
'<span style="margin-right: 10px;"><span style="font-weight:bold;">Task Status: </span>{4}</span></div>', $htmlEncode(id + Srch.U.Ids.title), titleHtml, assignedTo, dueDate, status);
search.Grouping.push(grouping, content);
The content is getting pushed to a function (not shown here) that sorts them into groups. The groups[key] is basically the same thing as content.
I am not sure why it is not working in your case but I have prepared a simple demo for you here:
// get all the elements with class 'group'
var groups = document.getElementsByClassName('group');
// add click event listener to each group
for (var i = 0; i < groups.length; i ++)
groups[i].addEventListener("click", toggle, false);
// function to toggle group contents
function toggle() {
// get all the elements within this group with class 'content'
var contents = this.getElementsByClassName('content');
// if the content is visible then hide it and vice-versa
for (i = 0; i < contents.length; i++) {
if (contents[i].style.display == "block") {
contents[i].style.display = "none";
}
else {
contents[i].style.display = "block";
}
}
}
.content {
display: None;
padding-left: 10px;
}
.group {
margin-top: 10px;
}
<div class="group">
Group1
<div class="content another">
Group 1 Content 1
</div>
<div class="content another">
Group 1 Content 2
</div>
</div>
<div class="group">
Group2
<div class="content another">
Group 2 Content 1
</div>
<div class="content another">
Group 2 Content 2
</div>
</div>
I want to add elements after the last one.
My current code
<div class="find"><div id="FirstElement"> /*First element loaded first */ </div><div>
$('#AddNextElement' + id).click(function (e) {
$('<div id="NextElement' + id +'">' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement"));
}
Current it adds only it after the first element:
1
4
3
2
I want it to add after the last element every time:
1
2
3
4
I've followed these links and I didn't find what I'm looking for:
jQuery insertAfter last item
insertAfter specific element based on ID
jQuery: Add element after another element
Thank you in advance!.
How I fixed it:
$('#AddNextElement' + id).click(function (e) {
$('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement").parent().find('.Finder').last());
}
I found the .parent().find('.find').last(); then insert after the last
Just you need last() method
$('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>')
.insertAfter($('[id^="NextElement"]').last());
How about adding a class to all elements? It will be easier to find the last:
$('.element-class:last').after('<div class="element-class" id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>');
This of course means that your First element must also have the class:
<div class="element-class" id="FirstElement"> /*First element loaded first */ </div>
Find the last element in the DOM, in your case it'll be 'NextElementxx' and then use 'after':
$('#NextElement2').after( ..new stuff.. );
HTML:
<div id="FirstElement"> First element loaded first </div>
<div id="AddNextElement">Click me</div>
JS:
var current = 0;
$('#AddNextElement').click(function (e) {
var $el = (current == 0) ? $("#FirstElement") : $("#NextElement"+current);
current++;
$('<div id="NextElement' + current +'">Other element '+current+'</div>').insertAfter($el);
});
Try yourself on jsfiddle
You can just use this:
jQuery('##AddNextElement').last().after();
one way is to store the last element.
<div id="FirstElement"> /*First element loaded first */ </div>
var lastElement = $('#FirstElement');
$('#AddNextElement' + id).click(function (e) {
var element = $('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>'));
element.insertAfter(lastElement);
lastElement = element;
}
You can try below code, it will add the new div after the last "NextElement" div
JS Code:
$(function(){
$('#AddNextElementButton').on("click", function (e) {
var id = $("[id^='NextElement']").length ? $("[id^='NextElement']").length+1 : 1;
if($("[id^='NextElement']").length){
$('<div id="NextElement'+ id +'">Add after the last element</div>').insertAfter($('[id^="NextElement"]').last());
} else {
$('<div id="NextElement'+ id +'">Add after the last element</div>').insertAfter($('#FirstElement'));
}
});
});
**hope this will make you understand well GitHub:Omar-baksh **
// code by GitHub: omar-baksh
// jquery is required online !!
/*
//this scricp test if jquery loded
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
*/
var gfather = document.getElementsByClassName('Gfather');
var father = document.getElementsByClassName('father');
var son = document.getElementsByClassName('son');
function gf(argument) {
$(gfather).mouseenter(function(){
for (let i = 0; i < father.length; i++) {
father[i].style.display='block';
};
// show father fun() body show body last ...
});
$(father).mouseenter(function(){
for (let i = 0; i < son.length; i++) {
son[i].style.display='block';
};
// son show body last ...
});
// gf body last ...
}
// show form setting bottun fun()
function add(){
const x = document.getElementById("frm").style.display='block';
alert('setting opened');
}
// form add element fun()
var clslist=document.getElementsByClassName("list");
var inher =document.getElementById("level");
var num =document.getElementById("num").value;
var txt =document.getElementById("inp-text");
// var add-btn = document.getElementById("btn-secsuce");
/*
$("#inher").change(function () {
alert(inher);
document.getElementById("inp-text")="you selected"+ document.getElementById("level").value;
// body...
});
*/
var clss ="";
var ii;
$( "#btn-secsuce" ).click(function () {
//txt.value="class name "+inher.value;
if( String(inher.value) =="Grand father"){
clss ="Gfather";
jQuery('<div/>', {
id: Math.ceil(Math.random() * 999),
text:txt.value,
"class": clss,
title: clss+clss.length
}).appendTo(clslist);
alert("add class "+inher.value+gfather.length);
}
else { // alert("class enhhert is roung you chose " +inher.value )
}
/// add father to g father
if( String(inher.value) =="father"){
var txt2 = $("<div class="+"father"+"></div>").text(txt.value);
$(father[num-1]).after(txt2);
}
else{
}
});
.Gfather{
width: 60px;
height: auto;
border-left: 6px dashed red;
border-bottom: 6px dashed red;
background-color: silver;
top:0;
display:block;
position:relative ;
margin-left:9px;
white-space: nowrap;
}
.father{
width: 60px;
border-left: 6px dashed red;
border-bottom: 6px dashed red;
bottom:0;
padding-top:0px;
border-right-width: small;
left:66px;
white-space: nowrap;
position:relative ;
background-color: #550088;
color:white;
display: block;
}
<head>
<title>tree js</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./tree.css">
</head>
<body>
<div class="list">
<div class ="Gfather" onmouseover="gf();">
grand father 1
</div>
<div class ="father">
father
</div>
<div class ="son">son
</div>
<div class ="son">son
</div>
</div>
<!-- add element show setting btn -->
<button id="add" onclick="add()" > add setting</button>
<form id="frm">
<h6>1</h6>
<select id="level">
<option>Grand father</option>
<option>father</option>
<option>son</option>
</select>
<h6>2</h6>
<select id="num">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br>
<h6>3</h6>
<input id="inp-text" type="text">
<h5 >4</h5>
<button type="button" id="btn-secsuce" >Add The Element </button>
</form>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./tree.js"></script>