Issue
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>
Solution
Instead of setting a variable, pass the value to the opendetails()
function.
var topicButtons = document.querySelectorAll('p.topicName');
for (var i = 0; i < topicButtons.length; i++) {
topicButtons[i].addEventListener('click', function() {
var topicHeading = this.innerHTML;
opendetails(topicHeading);
});
};
document.getElementById("show").addEventListener("click", function() {
opendetails(topicHeading);
})
function opendetails(details) {
console.log(details);
}
<div class="wallet-buttons" id="walletsList">
<div id="Topic1" class="button-section">
<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">
<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">
<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">
<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>
Answered By - Barmar Answer Checked By - Mildred Charles (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.