Javascript to html in VS code-CodePudding

To learn more about how to code in html, I was seeing if I could recreate Brave Coder's bulk email sender on my own. When I couldn't figure it out, I reviewed the code in his video https://youtu.be/JhQONaHxLko. Although I have edited mine to be nearly identical, I cant seem to link my Javascript to the index.html. I have screenshots below.

The code should add "To email" input boxes when the add more button is pressed. Its not working. I checked to see if the display wasn't working and the extra boxes were behind the others, but it wasn't.

Any ideas?

The links to the app.js is properly sourced. They are in the body section at the bottom. I tried it in the top and in the head and no luck. I'm not very experienced, so I am having a hard time solving it. The tittle of the source for the app.js file is precisely "~/Email/app.js", but yet it doesn't run. It could be something wrong with the js itself, but Ive checked every character and I cannot find a difference between mine and Brave Coder's in the video, yet his works fine. This leads me to think its just not calling the function.

It may also be something wrong with the div class itself, if the button is not properly working. But I'm pretty sure its code is right.

I could be over looking something obvious, I'm just not sure at this point.

HTML

<!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">
    <!--CSS-->
    <link rel="stylesheet" href="styles.css">
    <title>Bulk Email Sender</title>
</head>
<body>
    <div class= "wrapper">
        <div >Test</div>
          <form >
            <div >
              <input type="text" placeholder="name" 
              required/>
            </div>
            <div >
                <input
                  type="email"
                  placeholder="From :(email)"
                  
                  required/>
            </div>
            <div  id="multipleFields">
                <div >
                    <input
                      type="email"
                      placeholder="To:(email)"
                      
                      required/>
                    <button type="button" id="addMore" >
                      Add More
                    </button>
                </div>
            </div>
            <div >
                <input type="text" placeholder="Reply-to: (optional)"
                >
            </div>
            <div >
                <input type="text" placeholder="Subject: (First, Last)"
                 required>
            </div>
            <div class ="input-box">
                <textarea class ="input"
                placeholder= "message"></textarea>
            </div>
            <div >
                <input type="file" placeholder="file"
                >
            </div>
            <button 
              type="submit" 
              
              style="width: 100%; margin-top: 15px"
            >
              Send Mail
            </button>
          </form>
        </div> 

    <!--jQuery-->
    <script src="js/jquery.min.js"></script>

    <!--App.js-->
    <script src="Email/app.js"></script>

   </body>
</html>

~/Email/app.js

$(document).ready(function () {
    $("#addMore").on("click", function() {
            var html = `<div ><input type="email"
        placeholder ="To:(email)"  required /></
        div>`;

            $("#multipleFields").on("click", (html));
    });
});

CodePudding user response：

I noticed some issues with the JS within your app.JS file. That was the main adjustment I made to get it working again.

I would just advise using CSV or semi-colon for multiple emails. Much easier to work with on the back-end and in the database.

[email protected];[email protected];[email protected]

[email protected],[email protected],[email protected]

$(document).ready(function() {
  let emailCounter = 0;
  $("#addMore").click(() => {
    var html = `<div ><input name="email${emailCounter  }type="email"
        placeholder ="To:(email)"  required /></
        div>`;

    $("#toEmails").append(html);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<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" />
  <!--CSS-->
  <link rel="stylesheet" href="styles.css" />
  <title>Bulk Email Sender</title>
</head>

<body>
  <div >
    <div >Test</div>
    <form >
      <div >
        <input type="text" placeholder="name"  required />
      </div>
      <div >
        <input type="email" placeholder="From :(email)"  required />
      </div>
      <div  id="multipleFields">
        <div id="toEmails">
          <div >
            <input type="email" placeholder="To:(email)"  required />
            <button type="button" id="addMore" >
                            Add More
                        </button>
          </div>
        </div>
      </div>
      <div >
        <input type="text" placeholder="Subject: (First, Last)"  required />
      </div>
      <div >
        <textarea  placeholder="message"></textarea>
      </div>
      <div >
        <input type="file" placeholder="file"  />
      </div>
      <button type="submit"  style="width: 100%; margin-top: 15px">
                Send Mail
            </button>
    </form>
  </div>

  <!--App.js
    <script src="Email/app.js"></script>
    -->
</body>