I have a menu with submenus which form a tree of options. It is a list of options of an app, and I need the operator to click the elements and get in the clipboard a string with the path to that element. Here is a sample code:
<div class="card">
<div class="card-header btn-nivel4" id="mnclA" onclick="copyPath('Menu > Limits')">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#mncl" aria-expanded="false" aria-controls="mncl">
<strong>Limits</strong>
</button>
</h2>
</div>
<div id="mncl" class="collapse" aria-labelledby="mnclA" data-parent="#omncA">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item btn-nivel5" onclick="copyPath('Menu > Limits > Avaliable limits')">Avaliable limits</li>
<li class="list-group-item btn-nivel5" onclick="copyPath('Menu > Limits > Adjust limits')">Adjust limits</li>
<li class="list-group-item btn-nivel5" onclick="copyPath('Menu > Limits > Emergency limit evaluation')">Emergency limit evaluation</li>
<li class="list-group-item btn-nivel5" onclick="copyPath('Menu > Limits > Confirm limit increase')">Confirm limit increase</li>
</ul>
</div>
</div>
</div>
<script>
function copyPath(text) {
navigator.clipboard.writeText(text);
}
</script>
Notice the problem here: I need to call the javascript funcion every time a new element is clicked, and need to put a line every time with the string I want to copy to clipboard, whici is always the string element with ” > ” separating the nodes. I need it to be done dinamically, so when I change the tree I don’t need to manually put a new line in every element. How do I do it?
I tried to search about nodes and learn more about HTML and Javascript, but I’m not sure I even know the correct keywords here.
Thanks in advance.