点击按钮触发JavaScript时出现Uncaught ReferenceError: call未定义问题排查

嘿，我来帮你梳理下代码里的问题，你遇到的Uncaught ReferenceError: call is not defined错误，主要是两个地方没处理好：

核心问题点 #

1. 按钮未绑定点击事件：你的<button id="create">只是单纯渲染在页面上，没告诉浏览器点击它要执行call函数，所以点击时浏览器找不到对应函数，直接抛出错误。
2. 缺失关键的文件生成函数：你代码里调用的makeTextFile是原示例里实现文件生成的核心逻辑，修改时不小心把这个函数弄丢了——就算解决了点击事件的问题，后续也会因为找不到这个函数而报错。

修正后的完整代码 #

HTML代码 #

<textarea id="textbox">Type something here</textarea>
<button id="create" onclick="call()">Create file</button>
<a download="info.txt" id="downloadlink" style="display: none">Download</a>

JavaScript代码 #

// 原示例中用来生成文本文件的核心函数，你之前遗漏了它
function makeTextFile(text) {
  // 将文本内容转换为Blob格式的文件对象
  var data = new Blob([text], {type: 'text/plain'});
  
  // 兼容不同浏览器的文件URL生成逻辑
  if (window.URL) {
    return window.URL.createObjectURL(data);
  } else {
    // 适配旧版浏览器的BlobBuilder API
    window.BlobBuilder = window.BlobBuilder || 
                         window.WebKitBlobBuilder || 
                         window.MozBlobBuilder || 
                         window.MSBlobBuilder;
    var bb = new BlobBuilder();
    bb.append(text);
    return window.URL.createObjectURL(bb.getBlob('text/plain'));
  }
}

function call() {
  var textbox = document.getElementById('textbox');
  var link = document.getElementById('downloadlink');
  
  // 生成文件下载链接并显示下载按钮
  link.href = makeTextFile(textbox.value);
  link.style.display = 'block';
}

关键修改说明 #

• 给按钮添加了onclick="call()"属性，让点击动作和你的函数建立关联，浏览器才能正确触发逻辑。
• 补全了makeTextFile函数，它负责把textarea里的文本转换成可下载的文件链接，是实现功能的核心。
• 删掉了call函数里没用的var create = document.getElementById('create');，让代码更简洁清爽。

最后提个小建议：尽量别用call当函数名哦，因为call是JavaScript里函数对象的内置方法，虽然不会直接出问题，但容易造成混淆，换成createTextFile这种语义化的名字会更靠谱～

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