Question

我有一个输入字段。当用户点击它时，一些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>

Answer 1

你实际上并没有展示任何东西。这一行：

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

需要像：

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

Answer 2

您想要添加它，而不是设置变量字符串。此外，我对你的摘录做了很多其他更新......

将变量设置为保留字也会导致很多问题。

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>

<强>更新

要删除之前的文本，只需使用Raphael remove函数即可。我们还必须重置变量something

if (alpha) alpha.remove();

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

Answer 3

value输入的words为空= =>当您调用拆分方法var splittxt = txt.split("");时，splittxt有一个length == 0，因此for语句的正文永远不会被执行。

输入未显示

3 个答案: