Why does my onClick js function call only work once per page load?

StackOverflow https://stackoverflow.com/questions/18936661

Question

I am trying to display an rss feed from google news using yql. Currently, if you enter a zip code into the form, it works once, but I cannot enter another code without refreshing the page. Any help would be greatly appreciated!
P1

        <script>   
        function top_stories(o){  
            var items = o.query.results.item;  
            var output = '';  
            var no_items=items.length; 

            for(var i = 0; i < 4; i++) {  
            var title = items[i].title;  
            var link = items[i].link;  
            var desc = items[i].description;  
           output += "<h3><a href='" + link + "'>"+title+"</a></h3>" + desc + "<hr/>";  
            }
         document.getElementById('results').innerHTML = output;    
         }  
         </script> 
    </head>
    <body>
        <form name="input" action="" method="get" id="zc">
        Zip Code: <input id="zip" type="text" name="zip">
    <input id ="zipbutton" type="Button" value="Submit"    onClick="showDiv(document.getElementById('zc').zip.value);" >

    <div id="results"  ></div> 
    <script id="yql"></script>
    <script>    
    function showDiv(zip) {             
    var a = "http://query.yahooapis.com/v1/public /yql?q=select%20*%20from%20rss%20where%20url%20%3D%20'http%3A%2F%2Fnews.google.com%2Fnews%3Fgeo%3D" + zip + "%26output%3Drss'%0A&format=json&diagnostics=true&callback=top_stories";
     document.getElementById("yql").setAttribute("src",a);                              
        }
    </script>
    </body>
Was it helpful?

Solution

Try to create new <script> element for every click.

var script = document.createElement('script');
script.setAttribute("src", a);
document.getElementsByTagName('head')[0].appendChild(script);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top