我无法使用 Id 选择元素？答案

【问题标题】：I cannot select element using Id?我无法使用 Id 选择元素？
【发布时间】：2020-10-13 09:19:35
【问题描述】：

我正在尝试将 id 作为参数传递给这样的函数，

HTML

<button type="button" class="like btn" onclick="like('<%=postid%>')">       
            <svg  id ='<%=likeid%>' class="bi bi-heart" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
              </svg>
    </button>

然后尝试像这样选择这个 id，

function like(id){
      var e=document.getElementById(id);
      console.log(e)

  }

但它在控制台中返回null，所以我尝试这样做，

window.onload=()=>{
  function like(id){
      var e=document.getElementById(id);
      console.log(e)

  }
}

现在我收到一个错误，function like is not defined 我从 2 天开始一直在尝试不同的东西，但没有任何效果，我也尝试在 body 标签末尾移动脚本标签，我也尝试使用 jquery 选择元素，但即使这样也无法选择元素，请有人告诉我我该如何解决这个问题。

【问题讨论】：

尝试控制台并检查其值是否正常，我多次发现问题出在 ejs 变量上
是的，我试过了，没问题

标签： javascript html express dom ejs

【解决方案1】：

你有没有这样的事情：

const like = (id) => {
    const e = document.getElementById(id);
    console.log(e);
};

你可以调用函数

like('my-id');

【讨论】：

仍然返回 null

【解决方案2】：

你可以像这样传递 id：

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function like(id)
            {
                console.log(id);
                console.log(document.getElementById(id));
            }
        </script>
    </head>

    <body>
        <button type="button" class="like btn" onclick="like('someid')">       
            <svg  id ='someid' class="bi bi-heart" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
              </svg>
    </button>
    </body>
</html>

如果您想使用like 函数导入外部javascript 文件，您只需在script.js 文件和html 文件为：

function like(id)
{
    console.log(id);
    console.log(document.getElementById(id));
}

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <button type="button" id="buttonId" class="like btn" onclick="like('someid')">       
            <svg id ="someid" class="bi bi-heart" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
              </svg>
    </button>
    </body>
</html>

【讨论】：

我做了同样的事情，你的意思是我应该将代码保留在脚本标签内的同一个html文件中吗？
你的函数在另一个js文件中吗？如果是，还有另一种解决方案。代码不需要保存在同一个 html 文件中。但是你可以像这样调用函数。这就是为什么我把它写在同一个文件中。
是的，它在其他文件中，这正是您编写的方式，无论如何感谢您的帮助
兄弟，我可以给你推荐一个解决方案吗？
实际上我改变了主意，我正在做其他事情，但我也想听听你的解决方案，以防万一有人需要。