Question

我正在为我的博客制作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>

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

Answer 1

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

document.getElementById('blogShow')

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

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

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

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

Answer 2

您的初始脚本存在一些问题。这是与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>

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

2 个答案: