在VS代码中将Javascript转换为html

laawzig2 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(166)

为了学习更多关于如何在html中编码的知识，我想看看我是否可以自己重新创建Brave Coder的批量电子邮件发送器。当我无法弄清楚时，我查看了他的视频https://youtu.be/JhQONaHxLko中的代码。虽然我已经编辑了我的几乎相同，我似乎不能链接我的Javascript到index.html。我有下面的截图。
当按下添加更多按钮时，代码应添加“To email”输入框。它不工作。我检查了一下显示器是否不工作，额外的盒子是否在其他盒子后面，但它不是。
有什么想法吗
指向app.js的链接来源正确。它们位于底部的主体部分。我试着在顶部和头部，没有运气。我不是很有经验，所以我很难解决它。app.js文件的源代码标题是“~/Email/app.js”，但它并没有运行。这可能是js本身的问题，但我检查了每一个字符，我找不到我和勇敢的编码者在视频中的区别，但他的作品很好。这让我认为它只是没有调用函数。
如果按钮不能正常工作，也可能是div类本身出了问题。但我很确定它的代码是正确的。
我可能是在看一些明显的东西，我只是不确定在这一点上。
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 class="alert">Test</div>
          <form class="form">
            <div class="input-box">
              <input type="text" placeholder="name" class="input"
              required/>
            </div>
            <div class="input-box">
                <input
                  type="email"
                  placeholder="From :(email)"
                  class="input"
                  required/>
            </div>
            <div class="multiple-fields" id="multipleFields">
                <div class="input-box">
                    <input
                      type="email"
                      placeholder="To:(email)"
                      class="input"
                      required/>
                    <button type="button" id="addMore" class="my-btn btn-sm">
                      Add More
                    </button>
                </div>
            </div>
            <div class="input-box">
                <input type="text" placeholder="Reply-to: (optional)"
                class="input">
            </div>
            <div class="input-box">
                <input type="text" placeholder="Subject: (First, Last)"
                class="input" required>
            </div>
            <div class ="input-box">
                <textarea class ="input"
                placeholder= "message"></textarea>
            </div>
            <div class="input-box">
                <input type="file" placeholder="file"
                class="input">
            </div>
            <button 
              type="submit" 
              class="my-btn"
              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 class="input-box"><input type="email"
        placeholder ="To:(email)" class="input" required /></
        div>`;

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

JavaScript

来源：https://stackoverflow.com/questions/74354488/javascript-to-html-in-vs-code

1条答案

按热度按时间

9jyewag01#

我注意到你的app.JS文件中的JS有一些问题。这是我为了让它重新工作而做的主要调整。
我只建议使用CSV或分号的多个电子邮件。更容易在后端和数据库中使用。
test@email.com;test2@email.com;test3@email.com
test@email.com,test2@email.com,test3@email.com

$(document).ready(function() {
  let emailCounter = 0;
  $("#addMore").click(() => {
    var html = `<div class="input-box"><input name="email${emailCounter++}type="email"
        placeholder ="To:(email)" class="input" 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 class="wrapper">
    <div class="alert">Test</div>
    <form class="form">
      <div class="input-box">
        <input type="text" placeholder="name" class="input" required />
      </div>
      <div class="input-box">
        <input type="email" placeholder="From :(email)" class="input" required />
      </div>
      <div class="multiple-fields" id="multipleFields">
        <div id="toEmails">
          <div class="input-box">
            <input type="email" placeholder="To:(email)" class="input" required />
            <button type="button" id="addMore" class="my-btn btn-sm">
                            Add More
                        </button>
          </div>
        </div>
      </div>
      <div class="input-box">
        <input type="text" placeholder="Subject: (First, Last)" class="input" required />
      </div>
      <div class="input-box">
        <textarea class="input" placeholder="message"></textarea>
      </div>
      <div class="input-box">
        <input type="file" placeholder="file" class="input" />
      </div>
      <button type="submit" class="my-btn" style="width: 100%; margin-top: 15px">
                Send Mail
            </button>
    </form>
  </div>

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

赞(0）回复(0）举报 2023-05-12

我来回答

在VS代码中将Javascript转换为html

1条答案

相关问题

热门标签

最新问答