tengo este html
<lu id="balancingSel" > <li><a href="bal.html"> "VALUE1" </a></li> <li><a href="bal.html"> "VALUE2" </a></li> <li><a href="bal.html"> "VALUE3" </a></li> <li><a href="bal.html"> "VALUE4" </a></li> </lu>Quiero obtener el valor cuando se hace clic en uno de esos elementos de la lista y pasarlo a otra función como puede ver a continuación.
Actualmente estoy intentando esto en mi bal.html
<script> var projectType; $(function () { //Initialize project name var ul = document.getElementById('balancingSel'); //Parent ul.addEventListener('click', function (e) { if (e.target.tagName === 'A') projectType = e.target.innerText; }); //Load data balancingTableLoad($("#balancingFileSelect").val(), projectType); fillInputFieldData($("#balancingFileSelect").val(), projectType); }); </script>El problema es que, aunque el valor se establece en la variable projectType cuando se llama a las otras dos funciones con esa variable como parámetro, no está definida.
Intenté mover la declaración de la variable dentro de la función, pero eso no resolvió el problema.
Su código llama a las dos funciones incluso antes de hacer clic en cualquier cosa, el motivo es que addEventListener se ejecuta después de hacer clic y esas dos funciones se ejecutan tan pronto como se definen.
ul.addEventListener('click', function (e) { if (e.target.tagName === 'A') projectType = e.target.innerText; // }); oringally the function addEventListener ends here //Load data balancingTableLoad($("#balancingFileSelect").val(), projectType); fillInputFieldData($("#balancingFileSelect").val(), projectType); }); // addEventListener should end hereDebe mover las llamadas de función dentro del bloque if , de lo contrario, no se podría establecer projectType :
function balancingTableLoad(val, type) { alert(type); } function fillInputFieldData(val, type) { alert(type); } $(function() { //Initialize project name var ul = document.getElementById('balancingSel'); //Parent ul.addEventListener('click', function(e) { if (e.target.tagName === 'A') { projectType = e.target.innerText; //Load data balancingTableLoad($("#balancingFileSelect").val(), projectType); fillInputFieldData($("#balancingFileSelect").val(), projectType); } }); }); <ul id="balancingSel" > <li><a href="bal.html"> "VALUE1" </a></li> <li><a href="bal.html"> "VALUE2" </a></li> <li><a href="bal.html"> "VALUE3" </a></li> <li><a href="bal.html"> "VALUE4" </a></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>