Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
218 views
in Technique[技术] by (71.8m points)

javascript - onclick event works only once in arctext script

I need a text arcing script (arctext) for a design project. I have added the code and it works fine for the most part. The problem is, I have added an onclick event to the script and it only works once. When you click again, it does nothing.

I have read a lot about doing away with the onclick and using the .click instead, but the problem is that the code that runs from the event is to assign a text value to a variable, that is then used to set the arc radius in the arc text script.

This is the code I have now:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<script> 
function getrad(){
    var R = document.getElementById("radius").value;
     $().ready(function() {
            $('#example').arctext({radius:R});
        });

}
 </script>

<input type="text" size="1" maxlength="3"  id="radius"  value=""><br/>
<input type="button" onclick"getrad()" value="Changearc"><br/>

This works one time, but not a second without refreshing – why?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<!DOCTYPE html>
<html>
<head>
    <title>Arctext on button click</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>    
    <script>
        $(function(){

            //initialize arctext
            $('#example').arctext({radius :$('#radius').val()});

            //set arc on button click
            $('#set_arc').on('click', function() {
                $('#example').arctext('set', {
                   radius : $('#radius').val(),
                   animation : {speed : 300}
                });        
            });

        });
    </script>
</head>
<body>

    <div style="margin:50px;">                        
        <label>Radius: </label><input type="text" size="1" maxlength="3"  id="radius"  value="500">&nbsp;&nbsp;&nbsp;                      
        <button id="set_arc">Change arc</button>            
        <div style="margin-top:50px;" id="example">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>

</body>
</html>

Source: Arctext.js Curving text with jQuery and CSS3


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...