Question

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
   var usr = 'charliesheen';

   function changeusr()
   {
      usr = document.getElementById("usrText").value;
      updatetwitter();
   }

   var twitter;
   newtwitter();

   function updatetwitter()
   {
      twitter.render().setUser(usr).start();
   }

   function newtwitter()
   {
     twitter =
     new TWTR.Widget({
       version: 2,
       type: 'profile',
       rpp: 4,
       interval: 6000,
       width: 200,
       height: 300,
       theme: {
         shell: {
         background: '#ffffff',
         color: '#367542'
       },
       tweets: {
          background: '#e3dfe3',
          color: '#000000',
          links: '#110af5'
       }
     },
     features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>

The results I see are: It loads fine. When I enter a new username and click “go” it may or may not reload the twitter widget, and the link “join the conversation” points to the correct url. I’d like it to reload the url with the new user entered. I’m a complete javascript noob. Thanks in advance.

Answer 1

Your input needs an id:

<input id='usrText' name="usrText"/>

Internet Explorer will return elements by name from “getElementById()”, but that is simply legacy broken behavior and it’s not imitated by other browsers.

edit — an update:

There doesn’t appear to be much documentation for that widget thing. Things work somewhat better if you set the “live” feature to true. Also, when you update the user, you have to zap an internal variable on the widget:

function updatetwitter()
{
  twitter._profileImage = null;
  twitter.setUser(usr).render().start();
}

Here is the jsfiddle if you’d like to see it.