JavaScript文字幻灯片显示不起作用？

Question

I'm making a Javascript slideshow for my blog yet the array doesn't seem to be working. Can someone please say what I've been doing wrong

    <SCRIPT type="text/javascript">
    var blog = new Array()

    blog[0]= "<h4>Sunday 17 of June 2012</h4><p title='Blog'>Donec tempus risus eget ligula viverra eget placerat odio tincidunt. Duis nisl sem, scelerisque faucibus congue vitae, accumsan at lectus. Cras vestibulum arcu ut lorem luctus eu pharetra tortor ultricies. Nam iaculis orci mauris. Etiam luctus, mauris sed adipiscing ullamcorper, augue enim volutpat sem, ut sagittis ipsum nibh ac nulla. Nam ultrices, quam eget sollicitudin porta, sapien mauris pulvinar augue, posuere hendrerit erat ligula ut magna. Maecenas laoreet nisi vitae magna consectetur a mollis purus tristique. Pellentesque elementum arcu non urna convallis eleifend. Aliquam eu lorem sed risus tempus tempor. Donec malesuada velit in odio vulputate iaculis. In tristique neque quis velit posuere adipiscing. Nullam dui neque, scelerisque non egestas feugiat, pellentesque vitae mauris.</p><hr>"

and so the array continues till

    function display1()
    {
        document.getElementById(blogShow).innerHTML( blog[0])
    }
    function display2()
    {
        document.getElementById(blogShow).innerHTML(blog[1])
    }
    function display3()
    {
        document.getElementById(blogShow).innerHTML(blog[2])
    }
    function display4()
    {
        document.getElementById(blogShow).innerHTML(blog[3])
    }
    function display5()
    {
        document.getElementById(blogShow).innerHTML(blog[4])
    }
 </SCRIPT>


 <div id="blogShow">
    <SCRIPT type="text/javascript">display1()</SCRIPT>
 </div>

<div id="blogNav">
        <input type="button" onClick="display2()" value="1" class="button">
        <input type="button" onClick="display3()" value="2" class="button">
        <input type="button" onClick="display4()" value="3" class="button">
        <input type="button" onClick="display5()" value="4" class="button">
    </div>

I know it's all inline and i will clean up after it works

Answer 1

When you're grabbing the div element by id, you need to pass in a string of the id:

document.getElementById('blogShow')

When you are assigning the innerHTML, you need to use .innerHTML = value and not .innerHTML(value) :

document.getElementById('blogShow').innerHTML = blog[0]

You should be ending your statements with a semicolon ; (this part is not absolutely necessary due to JavaScript semicolon insertion, but you should insert your own semicolons to avoid unexpected behavior in the future):

document.getElementById('blogShow').innerHTML = blog[0];

Answer 2

There are a few problems with your initial scripting. Here's a working fiddle to play with http://jsfiddle.net/KXLSb/

The highlights are:

• You're missing quotes around your getElementById parameter.
• innerHTML is not a function expecting a parameter, it needs a string to be assigned to it.

Here's the relevant code:

<script type="text/javascript">
//Declare array
var blog = [];

//Add elements
blog[0] = "<h4>Sunday 17 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[1] = "<h4>Monday 18 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[2] = "<h4>Tuesday 19 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[3] = "<h4>Wednesday 20 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[4] = "<h4>Thursday 21 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[5] = "<h4>Friday 22 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";
blog[6] = "<h4>Saturday 23 of June 2012</h4><p title='Blog'>Donec &hellip; vitae mauris.</p><hr>";

//Use one function instead of multiple, just pass in the array index to use
function displayBlogEntry(index) {
    //Wrap the div id in quotes as getElementById expects a string.
    var div = document.getElementById("blogShow");
    //innerHTML is not a function expecting a parameter, it is a property expecting a string.
    //use lefthand assignment instead.
    div.innerHTML = blog[index];
}

//Load first entry on DOM ready
window.onload = function() {
    displayBlogEntry(0);
}​
</script>

<div id="blogShow"></div>

<div id="blogNav">
    <input type="button" onClick="displayBlogEntry(0)" value="0" class="button">
    <input type="button" onClick="displayBlogEntry(1)" value="1" class="button">
    <input type="button" onClick="displayBlogEntry(2)" value="2" class="button">
    <input type="button" onClick="displayBlogEntry(3)" value="3" class="button">
    <input type="button" onClick="displayBlogEntry(4)" value="4" class="button">
    <input type="button" onClick="displayBlogEntry(5)" value="5" class="button">
    <input type="button" onClick="displayBlogEntry(6)" value="6" class="button">
</div>​