Home/ Questions/Q 8265565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T04:51:09+00:00

I have an input field. When the user clicks it some javascript converts the

  • 0

I have an input field. When the user clicks it some javascript converts the text to a Raphael JS library variable. I want to put each letter into a Raphael variable called string followed by a \n. When the user clicks on the button nothing is displayed. Can someone help me fix this?…

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of setting the variable string, you want add to it. Also, there were quite a few other updates I made to your excerpt…

    Setting variables to reserved words can also cause a lot of problems.

    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>

    Update:

    To remove the previous text, it is just a matter of utilizing the Raphael remove function. Also we have to reset the variable something

    if (alpha) alpha.remove();

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

    • 0