0

我正在为我的博客制作 Javascript 幻灯片，但该数组似乎无法正常工作。有人可以说我做错了什么吗

    <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>"

所以数组一直持续到

    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>

我知道这都是内联的，我会在它工作后清理

4

2 回答 2

2

当你通过 id 抓取 div 元素时，你需要传入一个 id 的字符串：

document.getElementById('blogShow')

当您分配 innerHTML 时，您需要使用.innerHTML = value而不是.innerHTML(value)：

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

您应该以分号结束您的语句;（由于 JavaScript 分号插入，这部分不是绝对必要的，但您应该插入自己的分号以避免将来出现意外行为）：

document.getElementById('blogShow').innerHTML = blog[0];
于 2012-06-17T03:53:15.023 回答
0

您的初始脚本存在一些问题。这是一个可以玩的小提琴http://jsfiddle.net/KXLSb/

亮点是：

  • 您在getElementById参数周围缺少引号。
  • innerHTML不是一个需要参数的函数，它需要一个字符串来分配给它。

以下是相关代码：

<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>​
于 2012-06-17T04:00:54.293 回答