JavaScript箭头函数语法：如何将文件内容输出到页面元素而非控制台

你遇到的语法错误本质是引号冲突，而非箭头函数语法问题。原代码中onchange属性使用双引号包裹代码，当你在getElementById里用双引号时，会提前闭合onchange的字符串，导致语法错误。

最简最短的修正方式有两种：

方式1：改用单引号定位元素 #

直接把getElementById的双引号换成单引号，避免冲突：

<input type="file" onchange="this.files[0].text().then(t => document.getElementById('output').innerText = t)">

方式2：转义双引号 #

如果坚持用双引号，需要对内部的双引号进行转义：

<input type="file" onchange="this.files[0].text().then(t => document.getElementById(&quot;output&quot;).innerText = t)">

补充说明 #

箭头函数对于单条执行语句可以省略大括号，所以上述写法都是合法的。如果需要更清晰的结构，也可以显式添加大括号：

<input type="file" onchange="this.files[0].text().then(t => { document.getElementById('output').innerText = t })">

最后别忘了在页面中添加用于显示内容的元素：

<div id="output"></div>

内容的提问来源于Stack Exchange，提问作者为匿名用户