[FIXED] How do I use Javascript to return the text of the paragraph clicked as a usable variable?

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)