2012-06-17 39 views
0

我正在爲我的博客做一個Javascript幻燈片,但該陣列似乎沒有工作。 可有人請說什麼我已經做錯了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> 

我知道這是所有內聯,我會清理它的工作原理

+1

功能,像大多數其他語言,可以在參數。不要將索引放在你的函數名中,你應該把它作爲參數傳遞。然後你只需要一個函數:'function display(id){document.getElementById(blogshow).innerHTML = blog [i]; }'你可以把它叫做'display(1);'或'display(2);' – Paulpro

回答

0

您的初始腳本有幾個問題。這裏有一個工作撥弄http://jsfiddle.net/KXLSb/

播放的亮點是:

  • 你錯過了周圍的getElementById參數報價。
  • innerHTML不是期待參數的函數,它需要一個字符串分配給它。

下面是相關的代碼:在Javascript

<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>​ 
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];