title: Getting data from text file via data-src using jQuery
body: <p>I am trying to retrieve text from a .txt file using jQuery (I am also using Bootstrap). I am very new to web design but I am familiar somewhat with coding. I have the following button in my HTML:</p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-primary-outline-btn text-btn&quot; data-toggle=&quot;modal&quot; data-src=&quot;test.txt&quot; data-target=&quot;#textModal&quot;&gt;&lt;img class=&quot;video_icon&quot; src=&quot;assets/icons/parchment_icon.png&quot; alt=&quot;text&quot;&lt;/button&gt;
  </code></pre>
  <p>As you can see, the target of the button is a modal which loads up text like so:</p>
  <pre><code>&lt;!-- Text Modal --&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;textModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; role=&quot;document&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                &lt;p id=&quot;outputText&quot;&gt;File not found.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>My JS file looks like this (changed following one of the answers):</p>
  <pre><code>$(&quot;.text-btn&quot;).on(&quot;click&quot;, textFunction);
  
  function textFunction() {
    var el = document.getElementById('test');
    console.log(el.getAttribute('data-src'));
    jQuery.get(el.getAttribute('data-src'), function(data) {
      $( '#outputText' ).html(data.replace('n',''));
    });
  }
  </code></pre>
  <p>Whilst the filepath outputs to the console correctly, I am unsure how to use jQuery to utilise this so that it will input the file contents into the modal-body. Additionally, my issue is now how to make the variable assigned through <code>getElementById</code> correctly correspond to the button pressed. Moreover, I am not sure how to use <code>getAttribute</code> or <code>attr</code> in jQuery to obtain the data source in javascript.</p>
  <p>This is an issue as I will have multiple buttons with multiple file sources so I would like the jQuery to retrieve from each button's respective data source. Is there a way in which I can do this...?</p>