使用document.getElementById获取输入值无法更新默认值问题咨询

问题根因 #

• 你使用const声明delimiter后二次赋值，const定义的常量不允许重新赋值，因此触发「无效赋值」错误
• 你读取的是defaultValue属性：该属性仅存储input的初始默认值，不会随用户输入更新；同时你写的.defaultValue = "|"代码会强制覆盖默认值为|，永远拿不到用户修改后的值
• 你当前的script标签已经放在body末尾，DOM元素加载完成后才会执行JS，无需额外添加onload事件，和加载顺序无关
• document.getElementById只会读取当前打开页面的DOM元素，如果你当前访问的是csv.html，就不会读取index.html的内容，只需确认csv.html中确实存在id为delimiter的元素即可

解决方案 #

1. 直接在HTML中设置默认值（无需单独写SetDefaultValue函数） #

给input标签添加value属性设置初始默认值：

<label for="delimiter">分隔符（最多1个字符）：</label>
<input type="text" id="delimiter" name="delimiter" required
minlength="0" maxlength="1" size="1" value="|">

2. 修改JS中分隔符的取值逻辑 #

删掉getRelease函数中原有的错误取值代码，替换为读取value属性的逻辑，可额外加兜底判断避免空值：

function getRelease(idFiltered) {
  return fetch(`https://api.*****.com/releases/${idFiltered}`, {
    'User-Agent': 'Dispodger/0.1',
  })
  .then(response => response.json())
  .then(data => {
    if (data.message === 'Release not found.') {
      return { error: `Release with ID ${idFiltered} does not exist` };
    } else {
      const id = data.id;
      const artists = data.artists ? data.artists.map(artist => artist.name) : [];
      const country = data.country || 'Unknown';
      // 替换为这行代码，读取用户实时输入的分隔符
      const delimiter = document.getElementById("delimiter").value || "|";
      // 原有后续逻辑
      [...]

3. 可选优化：增加分隔符合法性校验 #

可以在用户选择文件时先校验分隔符是否符合要求，避免后续逻辑出错：

document
.getElementById('fileInput')
.addEventListener('change', async function(e) {
  // 新增校验逻辑
  const delimiter = document.getElementById("delimiter").value;
  if (delimiter.length > 1) {
    alert("分隔符最多只能输入1个字符");
    return;
  }
  // 原有逻辑
  var file = e.target.files[0];
  if (file != undefined) {
    fileToLines(file).then( async id => {
      [...]
    });
  }
});

内容的提问来源于stack exchange，提问作者double-happiness