Modal with Changing Content

I am making a modal in a file named modal.html and the content that is to populate the modal is from an external JS file. The content is the string returned by the following function in a JS file named one.js:

function current()
{
  if(selection === 0 && yesResources[questionsCounter] != null)
  {
    return yesResources[questionsCounter];
  }
  else if(selection === 1 && noResources[questionsCounter] != null)
  {
  return noResources[questionsCounter];
  }
  else
  {
    return 'You are on the right track!';
  }
}

The HTML code written for the modal is as follows:

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
           <span class="close">&times;</span>
           <h2>Resources</h2>
        </div>
    <div class="modal-body">
        <p>Test</p>
        <p id='modalContent'></p>
    </div>
    <div class="modal-footer">
        <h3>Living Progress</h3>
    </div>
  </div>
</div>

I would like to call the current() function to populate the paragraph space with id 'modalContent'. I've tried using document.getElementById("modalContent").innerHTML = current(), document.getElementById("modalContent").textContent = current(), calling the function between the paragraph tags, etc. Any other suggestions? Thanks.