Changing text (paragraph) on link/button click

Discussion in 'HTML & Website Design' started by Qal, Jul 15, 2007.

0
  1. #1
    Hi,

    I've page that has a header image and a paragraph text below it. I want a button or link like "Next" or "Further" which when clicked moves the text further.

    Is it possible with CSS or Javascript?

    Any help greatly appreciated. Thanks.
     
    Qal, Jul 15, 2007 IP
  2. jazz7620

    jazz7620 Banned

    Messages:
    357
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It can be done with JavaScript. You probably need to create a Javascript array with your text in each array element. Keep a counter at the page load. When the user hits next, increment the counter and display the value of the nth element from the array.
    At the time of body load, the counter is at ZERO, so display the 0th element text.



    You can display the text in a div tag
    <html>
    <head>
    <script>
    var n = 0;
    arrayVariable = Array(); //check the JS syntax to define array variable
    arrayVariable[0] = "Text 0";
    arrayVariable[1] = "Text 1"; //etc.

    function displayText(){
    document.getElementById("textDisplay").innerHTML = arrayVariable[n];
    }

    function displayNext(){
    n++;
    displayText();

    }

    </script>
    </head>
    <body>
    <div id="textDisplay"></div>
    <input type="button" onClick="displayNext();">
    </body>
    <script>
    displayText();
    </script>
    </html>

    I don't have time to write/test the whole script, but this should get you started.
     
    jazz7620, Jul 15, 2007 IP