Soy nuevo en Javascript y autodidacta, mi inglés también es un poco rudo, por favor, ten paciencia conmigo. He buscado por todas partes y probado todo lo que puedo.
Estoy tratando de hacer una tabla de contenido donde al hacer clic aparece un formulario modal. Quiero que cuando se abra el formulario, el HTML interno del botón en el que se hizo clic se convierta en una variable por sí mismo. Se enviará junto con otras entradas de formulario. Solo quiero extraer el texto del párrafo y usarlo como una variable que se puede recuperar o algo así. Parece que no puedo sacar la variable topicHeading del bucle for, no estoy definido.
var topicHeading; var topicButtons = document.querySelectorAll('p[class^=topicName]'); for (var i = 0; i < topicButtons.length; i++) { topicButtons[i].addEventListener('click', function() { var topicHeading = this.innerHTML; return topicHeading; }); }; console.log(topicHeading); <div class="wallet-buttons" id="walletsList"> <div id="Topic1" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 1</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic2" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 2</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic3" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 3</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic4" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 4</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> </div>Deshazte de var en la función para que asigne la variable global en lugar de una variable local.
Para ver la variable, muéstrela desde una función que se ejecuta después de que el usuario haya hecho clic en un tema. Puedes usar otro botón para eso.
var topicHeading; var topicButtons = document.querySelectorAll('p.topicName'); for (var i = 0; i < topicButtons.length; i++) { topicButtons[i].addEventListener('click', function() { topicHeading = this.innerHTML; }); }; document.getElementById("show").addEventListener("click", function() { console.log(topicHeading); }) function opendetails() { } <div class="wallet-buttons" id="walletsList"> <div id="Topic1" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 1</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic2" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 2</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic3" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 3</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> <div id="Topic4" class="button-section" onclick="opendetails()"> <i class="active-icon"></i> <div class="btn-name"> <p class="topicName">Topic 4</p> </div> <div class="btn-img"> <img src="img/topicimg.svg" alt="Topic Image"> </div> </div> </div> <p> <button id="show">Show topic</button> </p>