1

我有一个输入字段。当用户单击它时，一些 javascript 将文本转换为 Raphael JS 库变量。我想将每个字母放入一个名为字符串的 Raphael 变量中，后跟一个 \n。当用户单击按钮时，什么都不会显示。有人可以帮我解决这个问题吗？...

    <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

当您调用 split 方法时value，输入的为words空白 => ，因此语句的主体永远不会执行。var splittxt = txt.split("");splittxtlength == 0for

于 2012-07-23T15:02:33.960 回答