Javascript没有触发另一个函数

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>

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>

About your code, try using just strings for the id:

 element.id = "<?=$row['id'];?>";

 /* ... */

 SetProperties("<?=$row['id'];?>");

Because getElementById expects a string. In some cases JavaScript could cast the number to string, but it depends on how getElementById is implemented in the browser.

Besides that, the code that your are doing can be implemented in a much better way:

• Output the HTML directly
• Use CSS for changing the styles
• If you need to associate some meta-data to your button so you can refer for example to a database id, use data attributes, instead of messing with the ID.

For example:

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

Then in CSS:

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

Also if you need to add a click handler, and you have a lot of buttons, you can assign the handler to the container of buttons (the example uses jQuery):

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

This is more efficient than assigning the click handler for each button.

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

I agree with @meagar -- why emit JavaScript when you can do it all on the server?

Here's how you would add the elements directly on the server-side, instead of emitting JavaScript that then adds the elements on the client-side:

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

and to style it, put this in the <head> or in your CSS file:

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