I am creating a Dynamic Tree of elements by using an Array Values maintaining the level by attribute value of Parent, which match from the element Button Text
I later on use as accordion.
here the issue coming is, it does not create element for all the elements having that specific Text
I have even used the For Loop and then try to insert with nextElementSibling as you can see in below function
function appendSymptomToForm(symptom, symptomElements, container) {
if (symptom.parent === 'none') {
symptomForm.appendChild(container);
} else {
var aTags = document.getElementsByTagName("button");
var searchText = symptom.parent;
var found;
for (var i = 0; i < aTags.length; i++) {
if (aTags[i].textContent == searchText) {
found = aTags[i].nextElementSibling;
found.insertBefore(container, found.nextElementSibling);
}
}
}
console.log(`Symptom ${symptom.text} appended to the form.`);
}
Below I have created the fiddle which give you full understanding, that I have 3 Levels in the array named, window.symptomData.
Every element add according to its Parent Attribute
for example note second Level B:
{ depth: 3, text: ‘Third level B’, parent: ‘second level B’, tooltip:
‘Descrie simptomele după o perioadă de ore’ }
Here you will see that there are multiple buttons of second Level B but it add Third Level only under the Last Element
Please refer the function appendSymptomToForm in the fiddle, where
it does appendChild
window.symptomData = [
{ depth: 0, text: 'De aproximativ', parent: 'none', tooltip: 'Perioadă nespecificată de timp, folosită pentru estimări' },
{ depth: 1, text: '1', parent: 'De aproximativ', tooltip: 'Al doilea nivel de timp estimat, similar cu primul' },
{ depth: 1, text: '2', parent: 'De aproximativ', tooltip: 'Al doilea nivel de timp estimat, similar cu primul' },
{ depth: 1, text: '3', parent: 'De aproximativ', tooltip: 'Al doilea nivel de timp estimat, similar cu primul' },
{ depth: 1, text: '4', parent: 'De aproximativ', tooltip: 'Al doilea nivel de timp estimat, similar cu primul' },
{ depth: 2, text: 'second level A', parent: '1', tooltip: 'Durată exprimată în ore' },
{ depth: 2, text: 'second level A', parent: '1', tooltip: 'Durată exprimată în zile' },
{ depth: 2, text: 'second level A', parent: '1', tooltip: 'Durată de timp' },
{ depth: 2, text: 'second level A', parent: '1', tooltip: 'Durată exprimată în luni' },
{ depth: 2, text: 'second level A', parent: '1', tooltip: 'Durată exprimată în ani' },
{ depth: 2, text: 'second level B', parent: '2', tooltip: 'Durată exprimată în ore' },
{ depth: 2, text: 'second level B', parent: '2', tooltip: 'Durată exprimată în zile' },
{ depth: 2, text: 'second level B', parent: '2', tooltip: 'Durată exprimată în săptămâni' },
{ depth: 2, text: 'second level B', parent: '2', tooltip: 'Durată exprimată în luni' },
{ depth: 2, text: 'second level B', parent: '2', tooltip: 'Durată exprimată în ani' },
{ depth: 2, text: 'second level B', parent: '3', tooltip: 'Durată exprimată în ore' },
{ depth: 2, text: 'second level B', parent: '3', tooltip: 'Durată exprimată în zile' },
{ depth: 2, text: 'second level B', parent: '3', tooltip: 'Durată exprimată în săptămâni' },
{ depth: 2, text: 'second level B', parent: '3', tooltip: 'Durată exprimată în luni' },
{ depth: 2, text: 'second level B', parent: '3', tooltip: 'Durată exprimată în ani' },
{ depth: 2, text: 'second level B', parent: '4', tooltip: 'Durată exprimată în ore' },
{ depth: 2, text: 'second level B', parent: '4', tooltip: 'Durată exprimată în zile' },
{ depth: 2, text: 'second level B', parent: '4', tooltip: 'Durată exprimată în săptămâni' },
{ depth: 2, text: 'second level B', parent: '4', tooltip: 'Durată exprimată în luni' },
{ depth: 2, text: 'second level B', parent: '4', tooltip: 'Durată exprimată în ani' },
{ depth: 3, text: 'Third level A', parent: 'second level A', tooltip: 'Descrie simptomele după o perioadă de ore' },
{ depth: 3, text: 'Third level A', parent: 'second level A', tooltip: 'Descrie simptomele după o perioadă de zile' },
{ depth: 3, text: 'Third level A', parent: 'second level A', tooltip: 'Descrie simptomele după o perioadă de săptămâni' },
{ depth: 3, text: 'Third level A', parent: 'second level A', tooltip: 'Descrie simptomele după o perioadă de luni' },
{ depth: 3, text: 'Third level A', parent: 'second level A', tooltip: 'Descrie simptomele după o perioadă de ani' },
{ depth: 3, text: 'Third level B', parent: 'second level B', tooltip: 'Descrie simptomele după o perioadă de ore' },
{ depth: 3, text: 'Third level B', parent: 'second level B', tooltip: 'Descrie simptomele după o perioadă de zile' },
{ depth: 3, text: 'Third level B', parent: 'second level B', tooltip: 'Descrie simptomele după o perioadă de săptămâni' },
{ depth: 3, text: 'Third level B', parent: 'second level B', tooltip: 'Descrie simptomele după o perioadă de luni' },
{ depth: 3, text: 'Third level B', parent: 'second level B', tooltip: 'Descrie simptomele după o perioadă de ani' },
];
// script.js
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded event triggered, initializing symptoms setup...');
const symptomData = window.symptomData; // Now pulling from the global variable set by sd.js
const symptomForm = document.getElementById('symptomForm');
if (!symptomForm) {
console.error('Failed to find symptom form on the page.');
return;
}
let symptomElements = {};
const tooltipDiv = document.createElement('div');
setupTooltipDiv(tooltipDiv);
document.body.appendChild(tooltipDiv);
symptomData.forEach(symptom => {
const container = document.createElement('div');
setupSymptomContainer(symptom, container);
const button = document.createElement('button');
setupSymptomButton(symptom, button, container);
const childrenContainer = document.createElement('div');
setupChildrenContainer(childrenContainer, container);
symptomElements[symptom.text] = { button, container, childrenContainer };
setupButtonEvents(button, childrenContainer);
appendSymptomToForm(symptom, symptomElements, container);
});
setupSendButton();
});
function setupTooltipDiv(tooltipDiv) {
tooltipDiv.id = 'tooltipDiv';
tooltipDiv.style = "position: fixed; bottom: 20px; left: 20px; padding: 10px; " +
"background-color: rgba(0, 0, 0, 0.75); color: white; border-radius: 5px; display: none;";
console.log('Tooltip div setup completed.');
}
function setupSymptomContainer(symptom, container) {
container.className = `symptom-instance depth-${symptom.depth}`;
console.log(`Setup container for symptom: ${symptom.text}`);
}
function setupSymptomButton(symptom, button, container) {
button.textContent = symptom.text;
button.className = 'symptom-button';
button.title = symptom.tooltip;
container.appendChild(button);
console.log(`Button created for symptom: ${symptom.text}`);
}
function setupChildrenContainer(childrenContainer, container) {
childrenContainer.className = 'sub-symptoms hidden';
container.appendChild(childrenContainer);
console.log('Children container setup completed.');
}
function setupButtonEvents(button, childrenContainer) {
button.onclick = () => {
childrenContainer.classList.toggle('hidden');
button.classList.toggle('pressed');
scrollToButton(button);
console.log(`Visibility toggled for: ${button.textContent}, New state: ${childrenContainer.className}`);
};
button.addEventListener('touchstart', () => showTooltip(button, button.title), { passive: true });
button.addEventListener('touchend', hideTooltip, { passive: true });
}
function appendSymptomToForm(symptom, symptomElements, container) {
if (symptom.parent === 'none') {
symptomForm.appendChild(container);
} else {
var aTags = document.getElementsByTagName("button");
var searchText = symptom.parent;
var found;
for (var i = 0; i < aTags.length; i++) {
if (aTags[i].textContent == searchText) {
found = aTags[i].nextElementSibling;
found.insertBefore(container, found.nextElementSibling);
}
}
}
console.log(`Symptom ${symptom.text} appended to the form.`);
}
function scrollToButton(button) {
const buttonRect = button.getBoundingClientRect();
const visibleAreaStart = window.innerHeight / 4;
const scrollYOffset = buttonRect.top - visibleAreaStart + window.scrollY;
window.scrollTo({
top: scrollYOffset,
behavior: 'smooth'
});
console.log(`Scrolled to button: ${button.textContent}`);
}
function setupSendButton() {
const sendButton = document.createElement('button');
sendButton.textContent = 'Copiaza Selectate';
sendButton.addEventListener('click', () => {
const selectedSymptoms = Array.from(document.querySelectorAll('.symptom-button.pressed'))
.map(btn => btn.textContent.trim())
.join(', ');
navigator.clipboard.writeText(selectedSymptoms)
.then(() => {
console.log('Selected symptoms copied to clipboard.');
alert('Selected symptoms copied to clipboard.');
})
.catch(err => {
console.error('Error copying to clipboard:', err);
alert('Failed to copy symptoms. See console for errors.');
});
});
document.body.appendChild(sendButton);
console.log('Send button setup completed.');
}
function showTooltip(button, text) {
const tooltipDiv = document.getElementById('tooltipDiv');
tooltipDiv.textContent = text;
tooltipDiv.style.display = 'block';
console.log(`Tooltip shown for ${button.textContent}: ${text}`);
}
function hideTooltip() {
const tooltipDiv = document.getElementById('tooltipDiv');
tooltipDiv.style.display = 'none';
console.log('Tooltip hidden.');
} <div id="symptomForm">
</div>