问题：无法在订单历史中正确显示API获取的电影标题

我开发了一个JavaScript程序，功能是让用户在文本框输入电影名称（或部分名称），通过OMDB API获取电影信息，之后可预订该电影的票务，用户信息会保存在订单历史中。但目前存在问题：订单历史中显示的是用户输入的电影名称，而非API返回的正确电影名称。例如，查找电影《The Passion of the Christ》时，输入“The Passion of the”，OMDB API能返回正确的电影，但无法将该正确名称存入变量并显示在订单列表中。

核心问题 #

当前代码在addOrderToHistory函数中直接取用户输入框的value作为电影名称，但API返回的正确电影名称仅被赋值给页面上的.Movie-Title元素，没有被存储下来供后续订单流程使用。

修复步骤 #

• 新增全局变量存储正确电影名：在代码顶部声明变量，专门保存API返回的官方电影名称。
• API请求成功后更新变量：在fetchMoviePoster的回调逻辑中，将data.Title赋值给这个全局变量。
• 订单创建时使用正确名称：修改addOrderToHistory函数，替换输入框值为全局变量中存储的官方电影名。
• 增加前置校验：确保用户先通过API获取到有效电影信息再下单，避免使用未初始化的电影名。

"use strict";
const orderHistory = JSON.parse(localStorage.getItem("Order-History")) || [];
let currentMovieTitle = ""; // 新增：存储API返回的正确电影名称
document.addEventListener("DOMContentLoaded", init);

function init() {
  hookupEventHandlers();
  showOrderHistory();
}

function hookupEventHandlers() {
  document.getElementById("Find-Movie").addEventListener("click", fetchMoviePoster);
  document.getElementById("Place-Order").addEventListener("click", function(e) {
    e.preventDefault();
    processForm();
    showOrderHistory();
  });
}

function fetchMoviePoster() {
  const movieTitleInput = document.querySelector("#Movie-Title").value;
  const apiKey = "c3b11b36";
  const apiUrl = `http://www.omdbapi.com/?t=${movieTitleInput}&apikey=${apiKey}`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      const posterElement = document.querySelector("#Movie-Poster");
      const posterSection = document.querySelector("#Poster-Section");
      const orderformSection = document.querySelector("#Order-Form");
      const movieTitleItself = document.querySelector(".Movie-Title");
      
      if (!movieTitleInput) {
        alert("Please enter a movie title!");
        return;
      }
      // 新增：校验API是否返回有效电影数据
      if (data.Error) {
        alert(`无法找到电影：${data.Error}`);
        return;
      }
      
      posterElement.src = data.Poster;
      posterSection.style.display = "block";
      orderformSection.style.display = "block";
      movieTitleItself.textContent = data.Title;
      currentMovieTitle = data.Title; // 保存API返回的正确电影名到全局变量
    })
}

function processForm() {
  const user = document.querySelector("#User");
  const amountOfTickets = document.querySelector("#Ticket-Amount");
  const email = document.querySelector("#Email");
  addOrderToHistory(user, email, amountOfTickets);
}

function addOrderToHistory(userinput, emailinput, amountOfTicketsinput) {
  const user = userinput.value;
  const amountOfTickets = amountOfTicketsinput.value;
  const email = emailinput.value;

  // 新增：校验是否已获取到有效电影名称
  if (!currentMovieTitle) {
    alert("请先搜索并找到有效的电影！");
    return;
  }

  const order = {
    user,
    email,
    movieTitleItself: currentMovieTitle, // 使用全局变量中的正确电影名
    amountOfTickets,
  };
  
  const form = document.querySelector("form");
  if (!user || !amountOfTickets || !email || !form.checkValidity()) {
    alert("请填写所有必填字段，订单票数需在1-8之间，且邮箱格式有效");
    return;
  }
  
  displayThankYouMessage();
  orderHistory.push(order);
  localStorage.setItem("Order-History", JSON.stringify(orderHistory));
}

function displayThankYouMessage() {
  const thankYouSection = document.querySelector("#Thank-You");
  thankYouSection.style.display = "block";
}

function showOrderHistory() {
  const orderhistory = document.querySelector("#Order-History");
  const ul = document.querySelector("#orderList");

  ul.innerHTML = "";

  orderHistory.forEach((order) => {
    const listItem = document.createElement("li");
    listItem.innerHTML = `${order.movieTitleItself}<br> <a href="mailto:${order.email}">${order.user}</a> (${order.amountOfTickets} ticket(s))`;
    ul.appendChild(listItem);
    const lineBreak = document.createElement("br");
    ul.appendChild(lineBreak);
  });

  orderhistory.style.display = "block";
}

内容的提问来源于stack exchange，提问作者Omnicron