JavaScript 文本幻灯片不起作用

JavaScript text slideshow not working?

本文关键字：不起作用 幻灯片 文本 JavaScript      更新时间：2023-09-26

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

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

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

document.getElementById('blogShow')

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

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

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

document.getElementById('blogShow').innerHTML = blog[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>​
相关文章：