如何动态替换元素中的文本？

Question

I have a database which contains lines of text. I have a webpage that has multiple things going on in it. I need to read a line of text from the database, display it in the center of the page, wait "x" number of seconds, then read the next line and display it in the middle of the page. I need to do this without refreshing the web page and disturbing the rest of the events on the page.

I already have the script working where I read and assign the text to a variable. But, how do I have the text display in the center of the window, on top of the rest of the stuff, and then keep doing this until I have reached the end of the text lines? I am not asking how to read the text. I need help displaying the text in the middle, such as in a span located in the middle of the page.

Here is the current code..

$query = "SELECT * FROM text_lines WHERE tid='$tsid'";
$result = mysql_query($query) or exit(mysql_error());

$timepause = 6;


while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {  

    $textline = $row['text'];

?>

<script>

document.getElementById("textline").innerHTML = $textline;

</script>

<?php

}

Answer 1

You are dealing with three types of programming which, it seems, you might not have a clear understanding of their roles.

First, you have the creation of the HTML which is sent to the browser. This is what PHP does, and it runs on the web server. The database code is part of this process. This has to be done all in “one shot”, you can't run some PHP code, then “wait a few seconds” on the browser end, then run some more.

Then you have the CSS. This is embedded in to HTML, and instructs the browser how to display things. Making your span display in the middle of the page is accomplished with CSS. This is also a “one shot” action — after the browser receives all the HTML and builds the page structure but before displaying it, it goes through the page and executes the CSS to move stuff around, sets colours and fonts, etc.

Finally you have the Javascript, which runs on the browser after the page is loaded. This is the only part of your page that can do stuff “asynchronously”, ie, not “one shot”, but do a little of this, then wait, then do some more stuff later. Or wait for keyboard or mouse input and react to it. Javascript lets you manipulate the CSS and the HTML, modifying it from what was originally send from the PHP script.

I assume you are not using AJAX, so this means that all the data that will be manipulated by Javascript needs to be there from the beginning. You can't have the Javascript go and tell the web server to run some more PHP and send the HTML (this is what AJAX does).

So, your PHP needs to get all your lines of text from the database and include it with the page. Then the CSS needs to hide all but the first line. Finally the Javascript will wait a few seconds, change the CSS to hide the first line and show the next line, and repeat this process.

Answer 2

You can't use a PHP variable directly in javascript:

You instead need to wrap it:

<script>

document.getElementById("textline").innerHTML = <?php echo $textline; ?>

</script>

Answer 3

You could put the text in a div then absolutely position the div centered and use a high z-index so it appears above all other elements.

To run code after a number of seconds you can use the setInterval() method.