查询选择器找不到 id

Question

我正在尝试查询我的 dom 中的克隆元素，但查询选择器找不到它。特别是 #reply_form 尽管在模板中使用了 id，但什么也没有显示。我也尝试过 ("#reply_form"+post_id) 因为我在将它推到 dom 之前在底部重新识别它，什么也没有。我完全没有想法。

代码如下：

<template id="reply_template">
  <div class="lk">
    <img class="profile_image" />
    <div>
      <div class="user">
        <div class="reply_author"></div>
        <div class="reply-body"></div>
      </div>
      <div class="reply">
        <div class="d-flex align-items-center">
          <i id="upvote" class="fas fa-arrow-up hover"></i>
          <span id="upvote_count_badge" class="badge bg-secondary"></span>
          <i id="downvote" class="fas fa-arrow-down hover"></i>
        </div>
        <div class="reply_comment" id="reply">Reply</div>
        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
            <i class="fas fa-award hover"></i>
        </div>
      </div>
      <div id="vl" class="vl"></div>
      <form id="reply_form" class="form-hidden">
        <img class="profile_image"/>
        <input class="cmt-reply" type="text" placeholder="Write a reply2"/>
      </form>
      <div id="reply_loader"><!--Nested Replies go here--></div>
    </div>
  </div>
</template>
<script>
  function loadReplies(post_id, count) {
    var reply_loader = document.querySelector('#reply_loader'+post_id)
    var reply_template = document.querySelector('#reply_template');
    if (count==0) {
      fetch('/_load_replies?f='+post_id).then((response) => {

        // Convert the response data to JSON
        response.json().then((data) => {
          for (var i = 0; i < data.length; i++) {
            //add_post(template, counter)

            // Clone the HTML template
            let template_clone = reply_template.content.cloneNode(true);

            // Query & update the template content
            let post_id=data[i].post_id;
            let post_url=data[i].post_url;
            let author=data[i].author;
            let author_id=data[i].author_id;
            let post_saved=data[i].current_user.post_saved;
            let post_upvoted=data[i].current_user.post_upvoted;
            let post_downvoted=data[i].current_user.post_downvoted;
            let current_user=data[i].current_user.current_user;
            let is_moderator=data[i].current_user.is_moderator;
            let is_big_top_moderator=data[i].current_user.is_big_top_moderator;
            let awards=data[i].awards;
            let media_url=data[i].media_url;
            let community=data[i].community;

            profile_images=template_clone.querySelectorAll(".profile_image");
            for(var k=0; k<profile_images.length; k++) {
              profile_images[k].src=data[i].post_profile_image;
            }

            let top=data[i].author;
            top+=" "+moment(data[i].timestamp).fromNow();
            if (awards) {
              top+=' ';
              for(var key in awards) {
                top+=awards[key]+' '+key;
              }
            }

            if (post_upvoted) {
              template_clone.querySelector("#upvote").setAttribute("style", "color: white");
              template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
            } else if (post_downvoted) {
              template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
              template_clone.querySelector("#downvote").setAttribute("style", "color: white");
            } else {
              template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
              template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
            }
            template_clone.querySelector("#upvote").setAttribute("onclick", "vote("+post_id+",1)");
            template_clone.querySelector("#downvote").setAttribute("onclick", "vote("+post_id+",0)");

            template_clone.querySelector("#post_award_modal").setAttribute("onclick", "build_award_modal("+post_id+")");

            template_clone.querySelector(".reply_author").innerHTML=top
            template_clone.querySelector(".reply-body").innerHTML=data[i].body;
            template_clone.querySelector("#upvote_count_badge").innerHTML=data[i].upvotes-data[i].downvotes;

            //it finds #reply no problem
            template_clone.querySelector("#reply").addEventListener("click", (e)=>{
              e.target.classList.toggle("blue");
              //It can not find this at all no matter what. I re id it at the bottom
              console.log(template_clone.querySelector("#reply_form"+post_id))
              template_clone.querySelector("#reply_form"+post_id).setAttribute("style", "color: blue")
              template_clone.querySelector("#vl")
            });

            //re id
            template_clone.querySelector("#upvote").id="upvote"+post_id;    
            template_clone.querySelector("#upvote_count_badge").id="upvote_count_badge"+post_id;
            template_clone.querySelector("#downvote").id="downvote"+post_id;
            template_clone.querySelector("#reply_loader").id="reply_loader"+post_id;
            template_clone.querySelector("#reply").id="reply"+post_id;
            template_clone.querySelector("#reply_form").id="reply_form"+post_id;
            template_clone.querySelector("#vl").id="vl"+post_id;
            
            reply_loader.appendChild(template_clone);
          }
        })
      })
    }
  }
</script>

这是一个代码片段：

function open_form(post_id) {
    console.log("reply"+post_id)
    document.getElementById("#reply"+post_id).classList.toggle("blue")
    document.getElementById("#reply_form"+post_id).classList.toggle("open")
    document.getElementsByID("#vl"+post_id).classList.toggle("open");
}

.like-comment, .reply_comment{
    cursor: pointer;
}

.vl{
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-left-radius: 30px;
    width: 5%;
    top: 25px;
    position: absolute;
    height: 100%;
    left: -20px;
    display: none;
}

.thumb.open, .vl.open, .form-hidden.open{
    display: flex;
}

.form-hidden{
    position: relative;
    transform: translateX(35px);
    display: none;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.cmt-reply{
    width: 75%;
    height: 30px;
    padding: 5px;
    border-radius: 8px;
    border: none;
    margin-left: 5px;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>

        <!--Broken Code here-->
        <div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
      <div id="vl64" class="vl"></div>
      <form id="reply_form64" class="form-hidden">
        <img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
        <input class="cmt-reply" type="text" placeholder="Write a reply2">
      </form>


    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Answer 1

使用 getElementById 时，不需要在字符串中传递 #。检查以下代码段。

function open_form(post_id) {
  console.log("reply" + post_id)
  document.getElementById("reply" + post_id).classList.toggle("blue");
  document.getElementById("reply_form" + post_id).classList.toggle("open");
  document.getElementById("vl" + post_id).classList.toggle("open");
}

.like-comment,
.reply_comment {
  cursor: pointer;
}

.vl {
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-left-radius: 30px;
  width: 5%;
  top: 25px;
  position: absolute;
  height: 100%;
  left: -20px;
  display: none;
}

.thumb.open,
.vl.open,
.form-hidden.open {
  display: flex;
}

.form-hidden {
  position: relative;
  transform: translateX(35px);
  display: none;
}

.profile_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.cmt-reply {
  width: 75%;
  height: 30px;
  padding: 5px;
  border-radius: 8px;
  border: none;
  margin-left: 5px;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link href="/static/css/style.css" rel="stylesheet">
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>

  <!--Broken Code here-->
  <div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
  <div id="vl64" class="vl"></div>
  <form id="reply_form64" class="form-hidden">
    <img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
    <input class="cmt-reply" type="text" placeholder="Write a reply2">
  </form>


  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Here 是 getElementById mdn 上的文档。

查询选择器找不到 id

queryselector can not find id

html

javascript

jinja2