Javascript没有触发另一个函数 - Javascript not firing another function

我试图使用javascript添加新的元素(按钮)到html文件。下面是工作的脚本:

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;
        var foo = document.getElementById("examples");
        foo.appendChild(element);
    </script>
    <?php
    }
    ?>
</div>

脚本添加新的元素到html文件，但我想改变一些属性(例如:按钮大小)太。

我有方法SetProperties(id, fontSize)，如果我在代码中添加它时，元素应该创建它不工作，它甚至不创建新元素。下面的代码让我很头疼:

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;
        var foo = document.getElementById("examples");
        foo.appendChild(element);
        *SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
    </script>
    <?php
    }
    ?>
</div>

下面是改变新元素属性的函数:

<script type="text/javascript">
function SetProperties(id, fontSize)
{
    var btn = document.getElementById(id);
    btn.style.fontSize = fontSize + "px;";
}
</script>

您可以这样尝试

<style>
#examples [type=button]
{
    font-size:25px;
}
</style>
<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;
        var foo = document.getElementById("examples");
        foo.appendChild(element);
    </script>
    <?php
    }
    ?>
</div>

关于您的代码，请尝试仅使用字符串作为id:

 element.id = "<?=$row['id'];?>";
 /* ... */
 SetProperties("<?=$row['id'];?>");

因为getElementById需要一个字符串。在某些情况下，JavaScript可以将数字转换为字符串，但这取决于getElementById在浏览器中的实现方式。

除此之外，你正在做的代码可以用一种更好的方式实现:

使用CSS更改样式
如果你需要将一些元数据关联到你的按钮，这样你就可以引用例如数据库id，使用data属性，而不是混淆id。

例如:

<div id="examples">
   <?php
     while ($row=mysql_fetch_array($result)) {?>
       <button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
     <?php
     }
     ?>
</div>

在CSS中:

.do-something { /* set CSS properties */ }

同样，如果你需要添加一个点击处理程序，并且你有很多按钮，你可以将处理程序分配给按钮容器(示例使用jQuery):

 $('#examples').on('click', '.do-something', function () { /* handler */ });

这比为每个按钮分配click处理程序更有效。

<script type="text/javascript">
function SetProperties(id)
{
    document.getElementById(id).style.fontSize = 25 + "px";
}
</script>
<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;
        var foo = document.getElementById("examples");
        foo.appendChild(element);
        SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
    </script>
    <?php
    }
    ?>
</div>

我同意@meagar的观点——当你可以在服务器上完成这一切时，为什么要发出JavaScript呢?

下面是直接在服务器端添加元素的方法，而不是发出JavaScript然后在客户端添加元素:

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
        <input type="button" value="Click me" id="<?=$row['id'];?>" />
    <?php } ?>
</div>

和样式，把它放在<head>或在你的CSS文件:

<style>
    #examples input {
        font-size: 25px;
    }
</style>

You may try like this to avoid creating `buttons` at `client` side
<div id="examples">
        <?php
        while ($row=mysql_fetch_array($result))
        {?>
            <input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
        <?php } ?>
    </div>