1

入力フィールドがあります。ユーザーがクリックすると、JavaScriptがテキストをRaphaelJSライブラリ変数に変換します。文字列とそれに続く\nというRaphael変数に各文字を入れたいと思います。ユーザーがボタンをクリックしても、何も表示されません。誰かが私がこれを修正するのを手伝ってもらえますか？...

    <html> 
    <head> 
    <script src="raphael.js"></script> 
    <script src="jquery-1.7.2.js"></script>  
    <script type="text/javascript">   
    var string = "";
    function animate() {  

    var txt = document.getElementById("words").value;
    var splittxt = txt.split("");

        var i;
        for (i = 0; i < splittxt.length; i++) {
        var string = splittxt[i] + "\n\n";

        }
        }      

        </script>
        <style type="text/css">
        #letters
        {
        text-align:center;
        margin-left:10px;
        width:25px;
        float:left;
        text-shadow:10px 5px 1px #4D4D4D;
        filter:DropShadow(Color=#4D4D4D, OffX=10, OffY=5);
        font-weight:bold;
        }

        </style>

        </head> 

        <body>  

        Text: <input type="text" id="words"  /> 
        <input type="button" value="Animate" onclick="animate()" /> 
        <div id='letters'></div>
        <div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px; background-color:blue;"> 
        </div> 
        <div id="elps" style="ma

rgin-left:100px;"/>  

    <script type="text/javascript"> //all your javascript goes here  
    var r = new Raphael("draw-here-raphael");  
    var string = r.text(50,50, string);
    </script>

    </body> 
    </html>
4

3 に答える 3

1

実際には何も表示していません。この行：

document.getElementById("letters").innerHTML + splittxt[i] + "<br>";

次のようにする必要があります。

document.getElementById("letters").innerHTML += splittxt[i] + "<br>";
于 2012-07-23T14:47:04.847 に答える
1

変数文字列を設定する代わりに、それに追加します。また、あなたの抜粋に加えた他のかなりの数の更新がありました...

変数を予約語に設定すると、多くの問題が発生する可能性もあります。

http://jsfiddle.net/fN9Me/

<html> 
    <head> 
    <script src="raphael.js"></script> 
    <script src="jquery-1.7.2.js"></script>  
    <script type="text/javascript">   
        var alpha = "";
        var something = "";
        var r = "";
        var txt = "";
        var splittxt = "";

        $(function() {
            r = new Raphael("draw-here-raphael");

            $("#animate").click(function() {
                txt = $("#words").val();
                splittxt = txt.split("");

                var i;
                for (i = 0; i < splittxt.length; i++) {
                    something += splittxt[i] + "\n\n";
                }
                alpha = r.text(50, 50, something);
            });

        });
    </script>
    <style type="text/css">
    #letters
    {
    text-align:center;
    margin-left:10px;
    width:25px;
    float:left;
    text-shadow:10px 5px 1px #4D4D4D;
    filter:DropShadow(Color=#4D4D4D, OffX=10, OffY=5);
    font-weight:bold;
    }

    </style>

    </head> 

    <body>  
       Text: <input type="text" id="words" value="" />
        <input id="animate" type="button" value="Animate" />
        <div id='letters'></div>
        <div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px; background-color:blue;">
        </div>
        <div id="elps" style="margin-left:100px;"/>  
    </body> 
</html>

アップデート：

前のテキストを削除するには、Raphaelremove関数を利用するだけです。また、変数をリセットする必要がありますsomething

if (alpha) alpha.remove();

http://jsfiddle.net/fN9Me/1/

于 2012-07-23T15:00:51.417 に答える
0

入力のvalueは空白です => があるwordssplit メソッドを呼び出すと、ステートメントの本体は実行されません。var splittxt = txt.split("");splittxtlength == 0for

于 2012-07-23T15:02:33.960 に答える