How do I use Javascript to return the text of the paragraph clicked as a usable variable?-CodePudding

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  id="walletsList">

  <div id="Topic1"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 1</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic2"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 2</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic3"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 3</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic4"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 4</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

</div>

CodePudding user response：

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  id="walletsList">

  <div id="Topic1"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 1</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic2"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 2</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic3"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 3</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

  <div id="Topic4"  onclick="opendetails()">
    <i ></i>
    <div >
      <p >Topic 4</p>
    </div>
    <div >
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>

</div>
<p>
<button id="show">Show topic</button>
</p>