I'm new to Javascript and self taught, my english is a little rough too, please bare with me. I've searched all over and tried everything I can.
I'm trying to make a table of content where clicking it brings up a form modal.. I want that when the form opens the innerHTML of the button clicked becomes a variable on it's own. It will be submitted alongside other form inputs.. I just want to extract the paragraph text and use it as a variable that can be recall or something like that. I can't seem to get the topicHeading variable out of the for loop, I get undefined.
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>Get rid of var in the function so you assign the global variable instead of a local variable.
To view the variable, show it from a function that runs after the user has clicked on a topic. You can use another button for that.
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>