title: The File System Access API createWritable() method works inside console, but not in script
body: <p>I'm currently getting to grips with the File System Access API for a future project, and I am having difficulty using the createWritable() method in the line:</p>
  <p><code>const writable = await fileHandle.createWritable();</code></p>
  <p>When I trigger it, it gives me the error:</p>
  <p><code>TypeError: fileHandle.createWritable is not a function</code></p>
  <p>However, when I run this exact command in the console, it works perfectly.</p>
  <p>I'm using windows 10 if that's relevant at all. Thanks for the help.</p>
  <p>I will include my relevant HTML and JS below:</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Hello There&lt;/h1&gt;
      &lt;button class=&quot;read-btn&quot;&gt;Read&lt;/button&gt;
      &lt;textarea id=&quot;txt&quot;&gt;&lt;/textarea&gt;
      &lt;button class=&quot;create-btn&quot;&gt;Create&lt;/button&gt;
      &lt;button class=&quot;write-btn&quot;&gt;Write&lt;/button&gt;
  &lt;/body&gt;
  &lt;script src=&quot;./index.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>const readBtn = document.querySelector(&quot;.read-btn&quot;);
  const createBtn = document.querySelector(&quot;.create-btn&quot;)
  const writeBtn = document.querySelector(&quot;.write-btn&quot;);
  const txt = document.querySelector(&quot;#txt&quot;);
  
  // Store a ref to file handle
  let fileHandle;
  let contents;
  
  // === READ FROM A FILE SYSTEM ===
  readBtn.addEventListener(&quot;click&quot;, async () =&gt; {
      // open filepicker
      [fileHandle] = await window.showOpenFilePicker();
      // Returns a file object
      const file = await fileHandle.getFile();
      // Runs text method on returned file object to access text
      contents = await file.text();
      // Inputs contents into txt
      txt.value = contents;
  });
  
  // === WRITE TO FILESYSTEM ===
  
  // Create a new file
  async function getNewFileHandle() {
      const options = {
          types: [
              {
                  description: 'Text Files',
                  accept: {
                      'text/plain': ['.txt'],
                  },
              },
          ],
      };
      const handle = await window.showSaveFilePicker(options);
      return handle;
  }
  
  // Save changes to disk
  async function writeFile(fileHandle) {
      contents = txt.value;
      // Create a FileSystemWritableFileStream to write to.
      const writable = await fileHandle.createWritable();
      // Write the contents of the file to the stream.
      await writable.write(contents);
      // Close the file and write the contents to disk.
      await writable.close();
  }
  
  createBtn.addEventListener(&quot;click&quot;, getNewFileHandle)
  
  writeBtn.addEventListener(&quot;click&quot;, writeFile)
  </code></pre>