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 = valueand notを使用する必要があり.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 に答える