Formulário de Cadastro com gerador de slug em javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <title>Upload de imagem</title>
</head>
<style>
    body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    }
    </style>
<body>
    <br>
    <div class="container">
        <h4>Cadastro</h4>
        <a href="home">Início</a> | <a href="pesquisar">Pesquisar imagem</a> | <a href="https://photo16x9.com" target="_blank">https://photo16x9.com</a>
        <br>

<form action="upload.php" method="post" enctype="multipart/form-data" class="slug-form container mt-5">
  <div class="form-group">
    <label>Nome/Título:</label>
    <input type="text" name="name" id="inputText" class="form-control">
  </div>
  <button type="button" id="convertButton" class="btn btn-primary">Gerar Slug</button>
  <br><br>
  <div class="form-group">
    <label>Slug Gerado:</label>
    <input type="text" name="slug" id="outputText" class="form-control">
  </div>
  <div class="form-group">
    <label>Imagem:</label>
    <input type="file" name="file" class="form-control-file" accept="image/*">
  </div>
  <div class="form-group">
    <label>Postagem:</label>
    <textarea id="description" class="form-control" name="postagem" rows="15" required></textarea>
  </div>
  <button type="submit" class="btn btn-success">Enviar</button>
</form>

<script>
  const form = document.querySelector('.slug-form');
  const inputText = form.querySelector('#inputText');
  const outputText = form.querySelector('#outputText');
  const convertButton = form.querySelector('#convertButton');

    convertButton.addEventListener('click', function() {
    const inputValue = inputText.value;
    const slug = inputValue.toLowerCase()
      .replace(/[áàãâä]/g, 'a')
      .replace(/[éèêë]/g, 'e')
      .replace(/[íìîï]/g, 'i')
      .replace(/[óòõôö]/g, 'o')
      .replace(/[úùûü]/g, 'u')
      .replace(/[ç]/g, 'c')
      .replace(/[ñ]/g, 'n')
      .replace(/[^a-z0-9 ]/g, '')
      .replace(/\s+/g, '-')

    outputText.value = slug;
  });


</script>

    </div>

    </body>
    </html>