javascript replace text in span

Question

I was looking around and found this code and tried to get it working but no luck. Basically if you click the button it is suppose to replace the text in the span with Hello world.

<script type="text/javascript">
    $(function(){                                
            $("#change").click(function(){              

                var onlineSpan = $("#people").text().replace("Hello World");
                $("#people").text(onlineSpan);

            });

            $("#refresh").click(function(){
                location.reload();
            });

        });
</script>

<span id="people">content to replace</span>
<button id="change"> Change </button>

What I would like to do is replace the text in the span but use an array to update the span every 60 seconds with a random entry from the array instead of using a button. Also the span is located inside an iframe and this iframe is on the same domain.

iframe 1

var myCars = new Array();
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";

$(function(){                                
     $("#change").click(function(){              

     var carSpan = $("#cars").text().replace(myCars);
     $("#cars").text(carSpan);

     });
 });

iframe 2

<span id="cars">content to replace</span>

The Javascript code you've quoted uses the JQuery library. You haven't mentioned JQuery anywhere in the question, so not sure whether you're using it or not. If not, this code won't work. — Spudley, Apr 18 '11 at 16:02
To clarify (correct me if i'm wrong): you have a page with the jquery include, the jquery code, and the button, and asking this button to change something within an iframe. I am not sure why you would want to use iframes, as javascript can manipulate the DOM without needing to refresh the page / have an iframe. If you need the data to be dynamic (sourced from a database or scraped from somewhere else) then you can use AJAX. It's not too difficult if you are using the jquery library. That way, you can have all the code present on 1 page (+ script include tags). — Danny, Apr 18 '11 at 16:14

score 1 · Accepted Answer · edited May 30 '12 at 19:19

1

For executing Javascript at an interval (every 60 seconds), use setInterval. To get a random number, use Math.random() as described here.

var myCars = new Array();
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";

function changeCars() {
     var randomI = Math.floor(Math.random()*myCars.length);
     var carSpan = $("#cars").html(myCars[randomI]);
}

$(document).ready(function(){                                
     setInterval(changeCars, 60000);
 });

You can see this in action.

edited May 30 '12 at 19:19

Jon Adams

24,464
18
82
120

answered Apr 18 '11 at 16:00

justkt

14,610
8
42
62

@FAFAOHI - you have Mootools 1.3 set on the left side as the JS library. Change that to jQuery 1.5.1 and it will work. If you have firebug you should be seeing the error `$(document).ready() is not a function`. Look at the link I provided to jsFiddle - it is working. Easy mistake to make. – justkt Apr 18 '11 at 16:18
haha didnt see how i missed that. one last thing in the function ChangeCars for var carSpan i added $parent.frames.("#cars").html(myCars[randomI]); because the span is in an iframe but its not working any ideas how to get that working? – FAFAFOHI Apr 18 '11 at 18:27
@FAFAFOHI - try this instead: `$("#cars", window.parent.frame2.document)` or whatever the name of your iframe with the cars span is instead of frame2. The second item for a jQuery selector is the context to search for the DOM element in, so you need to give it that value (props to [this answer](http://stackoverflow.com/questions/539504/run-jquery-in-the-context-of-another-frame/569985#569985) for the info). – justkt Apr 18 '11 at 18:32

Vlad Khomich · Answer 2 · 2011-04-18T16:10:11.193

0

well, in case you want to append new value to the span:

 var carSpanText = $('#cars').text(),
     randomnum = Math.floor(Math.random() * myCars.length);
 $('#cars').text( carSpanText + myCars[randomnum] );

if you need to just replace the text then:

 var randomnum = Math.floor(Math.random() * myCars.length);
 $('#cars').text( myCars[randomnum] );

edited Apr 18 '11 at 16:10

answered Apr 18 '11 at 16:04

Vlad Khomich

5,820
1
27
39

javascript replace text in span

2 Answers2