JS - Execute JS Module File

I am trying to make a form that can be copied which has several fields which are randomly generated in a person.js file. I was hoping (cause I can not find a way) to execute this entire file with a click of a generate button. Any help would be great! (There is no errors at all, on page load the script works, but I was hoping to attach it to a button so it can be constantly used to generate persons)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="/css/calls.css">


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Call Generator - SYRPC</title>
  </head>
  <body>


    <div class="container text-center">
        <h1>Call Generator</h1>

        <div class="row">
            <div class="">
              <button type="button" name="" id="generate" class="btn btn-primary" onclick="">Person Generator</button>
            </div>
        </div>

        <div class="container pt-5">
            <div class="">
                <button type="button" name="generate" id="generate" class="btn btn-primary">Generate</button>
                <form class="row g-3 mt-2">
                    <div class="col-6">
                        <label for="firstName" class="form-label">First Name</label>
                        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="">

                        <button type="button" name="" id="" class="btn btn-primary mt-2">Copy</button>

                    </div>
                    <div class="col-6">
                        <label for="" class="form-label">Second Name</label>
                        <input type="text" class="form-control" id="secondName" name="secondName" placeholder="">

                        <button type="button" name="" id="" class="btn btn-primary mt-2">Copy</button>
                    </div>

                    <div class="col-6 pt-2">
                      <label for="inputAddress" class="form-label">Address</label>
                      <input type="text" class="form-control" id="pAddress" name="pAddress" placeholder="1234 Main St">

                      <button type="button" name="" id="" class="btn btn-primary mt-2">Copy</button>
                    </div>
                    <div class="col-6 pt-2">
                      <label for="inputCity" class="form-label">City</label>
                      <input type="text" class="form-control" id="pCity" name="pCity" placeholder="Sheffield">

                      <button type="button" name="" id="" class="btn btn-primary mt-2">Copy</button>
                    </div>
                  </form>
            </div>
        </div>
    </div>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

    <script type="module" src="./person.js"></script>

  </body>
</html>

JS - Execute JS Module File

0 Answers