已验证的loadFile函数无法将Contact.txt导入Modal内容区

嘿，我瞅了下你的代码，发现几个关键问题导致Contact.txt的内容没法正常显示在模态框里，咱们一步步来修复：

1. 先搞定loadFile函数的语法&逻辑错误 #

你的loadFile函数定义一开始就有问题，参数部分不能直接写具体值，得先声明参数名，调用的时候再传值。另外还有几个小逻辑坑：

• 函数参数应该改成source, targetId, hasOnlyTitle的形式
• finalText的赋值得放在请求成功的判断里，不然请求失败时会把元素内容改成undefined
• splice那行的多余操作可以删掉，直接allText.splice(0, 1)就能删掉第一行

修复后的loadFile函数：

var loadFile = function(source, targetId, hasOnlyTitle) { 
  var allText; 
  var titleText; 
  var txtFile = new XMLHttpRequest(); 
  txtFile.open("GET", source, true); 
  txtFile.onload = function () { 
    if (txtFile.readyState === txtFile.DONE) { 
      if (txtFile.status === 200) { 
        allText = txtFile.responseText.split('\n'); 
        if (!hasOnlyTitle) { 
          // 获取标题并写入对应元素（先判断元素存在，避免报错）
          titleText = allText[0]; 
          allText.splice(0, 1); // 删除第一行标题
          var titleElement = document.getElementById(targetId + "Title");
          if(titleElement) {
            titleElement.innerHTML = titleText;
          }
        } 
        var finalText = allText.join('<br />'); 
        document.getElementById(targetId).innerHTML = finalText; 
      }
    } 
  }; 
  txtFile.send(null); 
}

2. 确保文件加载时机正确 #

有两种方式能保证模态框里有内容：

方式一：页面初始化时预加载文件 #

在页面加载完成后就调用loadFile，这样打开模态框时内容已经准备好了：

// 页面加载完成后预加载Contact.txt
window.onload = function() {
  loadFile('./data/en/Contact.txt', 'contact', true);
};

方式二：打开模态框时再加载文件 #

如果想每次打开模态框都获取最新内容，可以把loadFile调用放在按钮点击事件里：

// 点击按钮打开模态框，同时加载文件
btn.onclick = function () {
  modal.style.display = "block";
  loadFile('./data/en/Contact.txt', 'contact', true);
};

3. 额外检查点 #

• 确认HTML里的<p id="contact">确实存在（你已经写了，不过再核对下）
• 如果把hasOnlyTitle设为false，记得要添加<p id="contactTitle"></p>这类元素，不然会出现找不到元素的报错
• 要是你的页面和Contact.txt不在同一域名/端口下，会触发浏览器跨域限制，得把文件移到同域下，或者在服务器端配置CORS

把这些修复完，你的模态框应该就能正常显示Contact.txt的内容啦～

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