随机按钮的结果不显示

Question

我正在尝试创建自定义/随机故事生成器。

我目前有一个弹出窗口，其中包含 3 个要填写的表格，这些表格将替换故事的文本。当用户单击“Brew”时，我希望关闭弹出窗口并将故事结果显示在第二行的第二列中。目前，“Brew”按钮在按下时会显示一些文本，因为我编写了“displayJuice()”函数，但不会显示表单提交的文本结果。

我无法将故事的结果显示在页面的任何位置。

这是我的 Javascript 文件：

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';
}

这是我的模态的 html：

    <!-- 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>

最后，这是我试图让故事显示在其中的专栏

<!-- 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>

Answer 1

我意识到 javascript 加载得太快了，所以我添加了 defer：

<script src="js/scripts.js" defer></script>

为了区分大小写，我还将“insertx”元素更改为“insertX”。

现在它正在工作。