Question

由于我不知道元素的总数，因此我试图为JavaScript中的列表的每个项目添加一个函数，它需要动态。为了做到这一点而不会无限次数地复制粘贴代码，我决定通过将功能添加到html脚本标签中，方法是将功能添加到标签的innerHTML中。这是我的Javascript代码：

function myfun(){
    var bro= document.getElementById('helo');
    var x=["admin","RKP",   "VK","TS","MODBK"];
    var scr=document.getElementById('addscr');
    for(i=1;i<x.length;i++){
    bro.innerHTML +="<div class=\"column\"><h2 class=\"white-text title\">asdf</h2><div class=\"col-lg-2\"> <p class=\"t\">Rank</p> <div class=\"input-group\"> <p class=\"bruh\" id=\"price\">1</p></div> </div> <div class=\"col-lg-2\"> <p class=\"t\">Attack</p> <div class=\"input-group\"> <p class=\"bruh\" id=\"attack\">0</p> </div> </div><div class=\"col-lg-2\"><p class=\"t\">Defence</p> <div class=\"input-group\"> <p class=\"bruh\" id=\"defense\">0</p> </div> </div> <button class=\"butt\" style=\"width:150px;margin-top:0px;margin-left:100px\" onclick=\"nk"+i+"()\" >Attack</button></div>";
    scr.innerHTML+="function nk"+i+"(){location.href=\"#pop"+i+"\";}";
}}

这应该做的是在脚本标签id =“ addsrc”中添加一些功能，但是在控制台中出现以下错误：

nk1尚未在HTMLButtonElement.onclick

中定义

.. nk2用于第二个功能，依此类推...

函数nk应该执行的操作是打开一个模式（作为html＃div传递）。

请快速创建一些建议的简便方法（鉴于编号不在列表中），以创建类似的功能（具有不同的编号），或者帮助我解决此问题。谢谢！

Answer 1

脚本标签仅执行一次，更改其文本将不会再次运行它。因此，您输入到script标记中的代码没有运行，并且实际上并未创建您的函数。

不要试图创建多个函数，只需创建一个函数即可将数字传递给：

function nk(num){
  location.href="#pop"+num;
}
//notice the placement of "i" is changed to make 
//onclick="nk(1)" and so on
bro.innerHTML += "... onclick=\"nk("+i+")\" > ..."

如何使用innerHTML在<script>标记中添加带有循环的函数

1 个答案: