title: How to make the button extract text from othere elements?
body: <p>I have made a small &quot;Note Taker&quot; application for educational purposes, and I want to add one more functionality there. I want the &quot;View Detail&quot; button to show the whole note in a modal appearing in the middle of the screen, but I'm not actually sure how I am supposed to do this and how to make the button extract the text from the initial note.
  I attach html, javascript code and a screenshot for better understanding of the problem.</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/style.css&quot;&gt;
      &lt;script src=&quot;/app.js&quot; defer&gt;&lt;/script&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Note Taker&lt;/h1&gt;
      &lt;h2&gt;Add A New Note:&lt;/h2&gt;
      &lt;div id=&quot;inputField&quot;&gt;
      &lt;p id=&quot;note&quot;&gt;Note:&lt;/p&gt;
      &lt;textarea name=&quot;&quot; id=&quot;textField&quot; cols=&quot;30&quot; rows=&quot;10&quot; placeholder=&quot;Put your text here&quot;&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;button id=&quot;addNoteBtn&quot;&gt;Add Note&lt;/button&gt;
  
     &lt;div id=&quot;noteContainer&quot;&gt;
          
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>HTML here ^</p>
  <pre><code>const addNoteBtn = document.getElementById(&quot;addNoteBtn&quot;)
  const noteContainer = document.getElementById(&quot;noteContainer&quot;)
  
  
  addNoteBtn.addEventListener(&quot;click&quot;, renderHTML)
  window.addEventListener(&quot;DOMContentLoaded&quot;, callStorage)
  
  function renderHTML(){
      const noteBox = document.createElement(&quot;div&quot;)
      noteBox.classList.add(&quot;noteBox&quot;)
      const noteTitle = document.createElement(&quot;h3&quot;)
      const noteText = document.createElement(&quot;p&quot;)
      const insideNoteBtn = document.createElement(&quot;button&quot;)
      insideNoteBtn.classList.add(&quot;insideNoteBtn&quot;)
  
      noteContainer.appendChild(noteBox)
      noteBox.appendChild(noteTitle)
      noteBox.appendChild(noteText)
      noteBox.appendChild(insideNoteBtn)
  
      let noteStorage
  
      if(localStorage.getItem(&quot;notes&quot;)=== null){
          noteStorage = []
      }else{
          noteStorage = JSON.parse(localStorage.getItem(&quot;notes&quot;))
      }
  
      noteStorage.push(textfield.value)
      localStorage.setItem(&quot;notes&quot;, JSON.stringify(noteStorage))
      
      noteStorage.forEach(function(value, index){
      
          noteTitle.textContent = `Note ${index + 1}`
          noteText.textContent = value
          insideNoteBtn.textContent = &quot;View Detail&quot;
      })
  }
  
  
  function callStorage(){
      let noteStorage
      if(localStorage.getItem(&quot;notes&quot;)=== null){
          noteStorage = []
      }else{
          noteStorage = JSON.parse(localStorage.getItem(&quot;notes&quot;))
      }
      noteStorage.forEach(function(value, index){
          const noteBox = document.createElement(&quot;div&quot;)
      noteBox.classList.add(&quot;noteBox&quot;)
      const noteTitle = document.createElement(&quot;h3&quot;)
      const noteText = document.createElement(&quot;p&quot;)
      const insideNoteBtn = document.createElement(&quot;button&quot;)
      insideNoteBtn.classList.add(&quot;insideNoteBtn&quot;)
  
      noteContainer.appendChild(noteBox)
      noteBox.appendChild(noteTitle)
      noteBox.appendChild(noteText)
      noteBox.appendChild(insideNoteBtn)
  
          noteTitle.textContent = `Note ${index + 1}`
          noteText.textContent = value
          insideNoteBtn.textContent = &quot;View Detail&quot;
      })
  }
  
  </code></pre>
  <p>Javascript here ^</p>
  <p><a href="https://i.stack.imgur.com/r4XX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r4XX2.png" alt="enter image description here" /></a></p>
  <p>screenshot ^</p>