Javascript没有触发另一个函数

Question

I am trying to add new elements (buttons) to html file using javascript. Here is the working 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);
    </script>

    <?php
    }
    ?>
</div>

The script adding new elements to html file, but I would like to change some of the properties (for example:button size) too.

I have method SetProperties(id, fontSize) and if I am adding it in code when elements should be created it doesn't work, it even do not creates that new elements. Here is the code which makes me a headache:

<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>

And here is the function which changes new elements properties:

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

Answer 1

you may try like this

<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>