Results of Randomized Button Not Displaying

I am trying to create a custom/random story generator.

I currently have a Pop-Up with 3 forms to fill out which will replace text of a story. When the user clicks "Brew", I want the Pop-up to close and the story results to be displayed in the second column of the second row. Currently the "Brew" button, when pressed, displays some text because of a function I wrote "displayJuice()", but not the text results of the form submission.

I am having trouble getting the results of the story to display anywhere on the page.

Here's my Javascript file:

function displayJuice() {
  var output = document.getElementById("output");
  output.style.display = "block";
}

const customName = document.getElementById('customName');
const customFruit = document.getElementById('customFruit');
const customDiet = document.getElementById('customDiet');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

function randomValueFromArray(array){
  const random = Math.floor(Math.random()*array.length);
  return array[random];
}

let storyText = "This delicious Fruit juice was made personally for Name! It's made with 100% Organic and locally-grown, fresh ingredients. What's inside: Fruit, Diet, :insertX:, :insertY:, and :insertZ:.";
let insertX = ['Raspberry','Strawberry','Blueberry','Blackberry', 'Cranberry'];
let insertY = ['Orange','Lemon','Lime','Tangerine', 'Grapefruit', 'Clementine'];
let insertZ = ['Papaya','Mango','Peach','Pineapple', 'Pomegranate', 'Lychee'];

randomize.addEventListener('click', result);

function result() {
  let newStory = storyText;

  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);

  newStory = newStory.replace(':insertx:',xItem);
  newStory = newStory.replace(':inserty:',yItem);
  newStory = newStory.replace(':insertz:',zItem);

  if(customName.value !== '') {
    const name = customName.value;
    newStory = newStory.replace('Name',name);
  }

  if(customFruit.value !== '') {
    const fruit = customFruit.value;
    newStory = newStory.replace('Fruit',fruit);
  }

  if(customDiet.value !== '') {
    const diet = customDiet.value;
    newStory = newStory.replace('Diet',diet);
  }


  story.textContent = newStory;
  story.style.visibility = 'visible';
}

Here's the html of my modal:

    <!-- Pop Up Window -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Let's get your juice ready...</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <!-- Modal Content -->
          <div class="modal-body">
            <p class="lead"></p>
            <div class="form-group">
              <label for="customName">Your Name</label>
              <input id="customName" type="text" class="form-control" placeholder="enter your name"><br>
            </div>
            <div>
              <label for="customFruit">Favorite Fruit</label>
              <input id="customFruit" type="text" class="form-control" placeholder="Watermelon"><br>
            </div>
            <div>
              <label for="customDiet">Second Favorite Fruit</label>
              <input id="customDiet" type="text" class="form-control" placeholder="Tangerine"><br>
            </div>
          </div>

          <!-- Footer Buttons -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary randomize" onClick="displayJuice()">Brew</button>
          </div>


          <!-- End of Modal -->
        </div>
      </div>
    </div>

and lastly, here's the column I am trying to get the story to display in

<!-- Output Juice Creation -->


            <div class="col">
              <p class="story"></p> // THIS IS WHERE I WANT THE STORY TO DISPLAY

              <div id="output">
                <h1>Name, Your Juice is Ready!</h1>
   
              </div>
            </div>