2012-11-16 65 views
0

我基本上試圖讓一個單詞(第2頁)可點擊並充當鏈接以顯示不同的div內容。當他們選擇選項2時,然後點擊下一個按鈕,他們應該能夠點擊「Page 2」測試並導致顯示id =「test1」(選擇1,第1頁)內容。我已經嘗試了一些變量,但一直未能得到任何工作。我能做的最好的事情就是讓你回到選擇的選項,但我想消除任何用戶錯誤,並直接進入他們應該做的選擇的第一頁。
任何幫助將不勝感激。對不起,JQuery不是一個選項。通過點擊任何文字/鏈接來更改div的內容使用Javascript

<!DOCTYPE html> 
<html> 
<center> 
<head> 
<title>Test2</title> 
<script> 
function formReset() 
{ 
    document.getElementById("home").innerHTML =""; 
    document.getElementById("main").style.display = 'block'; 
    document.getElementById("1").checked = false; 
    document.getElementById("2").checked = false; 
} 
function nextPage() 
{ 
    if (document.getElementById("1").checked == true){ 
     document.getElementById("home").innerHTML = document.getElementById("test1").innerHTML; 
     document.getElementById("main").style.display = 'none'; 
     } 
     else 
    if (document.getElementById("2").checked == true){ 
     document.getElementById("home").innerHTML = document.getElementById("test2").innerHTML; 
     document.getElementById("main").style.display = 'none'; 
     } 
    return true; 
} 
function otherPage() 
{ 
    switch (document.getElementById('home').innerHTML) 
    { 
     case document.getElementById("test2").innerHTML: 
      (document.getElementById("home").innerHTML = document.getElementById("choice2_page2").innerHTML) 
      break; 
    } 
} 
</script> 
</head> 
<body> 
<h1>This is a test of the radio buttons</h1> 
<br /> 
<div> 
<form> 
    <div id="home"></div> 
    <div id="main"> 
    <input type="radio" name="grp1" id="1">1<br> 
    <input type="radio" name="grp1" id="2">2<br> 
    <br /> 
    <input type="button" name="button" value="Next" onClick="nextPage()"> 
    </div> 
</form> 
</div> 
<div name="test1" id="test1" style="display:none"><!-- Display this content --> 
    <h2>Choice 1<br>Page 1</h2> 
    <input type="button" value="Reset" id="reset_form" onClick="formReset()"> 
</div> 
<div name="test2" id="test2" style="display:none"> 
    <h2>Choice 2<br>Page 1</h2> 
    <input type="button" value="Next" id="page_choice" onclick="otherPage()"> 
    <input type="button" value="Reset" id="reset_form" onClick="formReset()"> 
</div> 
<div name="choice2_page2" id="choice2_page2" style="display:none"> 
<h2>You should have chose<br><b>Choice 1</b></h2><!-- When clicked, this "Choice 1" should display the contents of id="test1" (Choice 1, Page 1)--> 
<input type="button" value="Reset" id="reset_form" onClick="formReset()"> 
</div> 
</body> 
</center> 
</html> 

回答

0

我覺得這是你可能會尋找

function showPage(id) 
{ 
    document.getElementById(id).style.display = 'block'; 
} 

<a href="javascript:showPage('test1');">Choice 1</a> 
+0

它會顯示我正在看的內容,但舊內容仍然顯示。儘管如此,我可以與其合作,非常感謝。 –

+0

我加了document.getElementById(「home」)。innerHTML =「」;到該功能並清除舊內容。當我刷新並返回主頁面時,顯示兩個內容。我會繼續努力。 –

+0

添加了document.getElementById(「test1」)。innerHTML =「」;到功能,它是完美的。 –

1

好吧,我想這是你想要的,它可能是有點大,但它是你的問題的一個完整的解決方案,我猜。主要是,你有一些頁面,用戶可以選擇,首先看哪個頁面,但是然後你強迫用戶逐一查看所有的下一頁,直到結束。至少,這是我在這裏做的。

您可以在textContent數組中添加儘可能多的文本片段(頁面),只需檢查是否有相應數量的單選按鈕。

<html> 
<head></head> 
<body> 
<div id="mainDiv" style="text-align: center"> 
    <div id="textDiv"></div> 
    <div id="radioDiv"> 
     <input type="radio" id="rad1" name="radGrp"><label for="rad1">1</label><br> 
     <input type="radio" id="rad2" name="radGrp"><label for="rad2">2</label><br> 
     <input type="radio" id="rad3" name="radGrp"><label for="rad3">3</label><br> 
     <input type="radio" id="rad4" name="radGrp"><label for="rad4">4</label><br> 
     <input type="radio" id="rad5" name="radGrp"><label for="rad5">5</label><br> 
    </div> 
    <div id="btnDiv"> 
     <input type="button" id="btn" value="show"><br> 
    </div> 
</div> 
    <script type="text/javascript"> 

     /*here we push the onclick attribute in js, so the code is unobtrusive*/ 
     document.getElementById("btn").onclick = function(){formContent();}; 

     var radios = document.getElementsByName("radGrp"), 
      idCurrent = 0, 
      firstRun = true, 
      textContent = [ 
       "<h3>option 1</h3><p>here is the text of option 1 :(</p>", 
       "<h3>option 2</h3><p>here is the text of option 2 :)</p>", 
       "<h3>option 3</h3><p>here is the text of option 3!</p>", 
       "<h3>option 4</h3><p>here is the text of option 4 :-D</p>", 
       "<h3>option 5</h3><p>here is the text of option 5 :-P</p>" 
      ]; 

     function hideDivs(){ 
      document.getElementById("textDiv").style.display = "block"; 
      document.getElementById("radioDiv").style.display = "none"; 
      document.getElementById("btn").value = "next"; 
      firstRun = false; 
     } 

     function restoreDivs(){ 
      idCurrent=0; 
      document.getElementById("textDiv").style.display = "none"; 
      document.getElementById("radioDiv").style.display = "block"; 
      document.getElementById("btn").value = "show"; 
      firstRun = true; 
     } 

     /*function to find the id of a checked radio from the group*/ 
     function findChecked(){ 
      for (var i=0; i<radios.length; i++) { 
       if (radios[i].checked) idCurrent = radios[i].id; 
      } 

      /*since the id is in text, we cut the first part and leave*/ 
      /*just the number*/ 
      idCurrent = parseInt(idCurrent.slice(3)); 
     } 

     /*actual function*/ 
     function formContent(){ 
      if (idCurrent == 0) findChecked(); 
      if (firstRun) { 
       hideDivs(); 
      } 
      /*pushing into textDiv values from textContent array, which*/ 
      /*is your pages content*/ 
      document.getElementById("textDiv").innerHTML = textContent[idCurrent - 1]; 
      if (idCurrent<radios.length) { 
       idCurrent++; 
       /*changing the button value if the current piece of text*/ 
       /*is the last one*/ 
      } else if (idCurrent == radios.length) { 
       idCurrent++; 
       document.getElementById("btn").value = "finish!"; 
       /*if there is no more text, we just restore everything to*/ 
       /*the initial state*/ 
      } else { 
       restoreDivs(); 
       idCurrent = 0; 
      } 
     } 
    </script> 
</body> 
</html> 
+0

這不是我所要做的,但它給了我更多使用變量的練習,以免碰到你。這是一個工作問題解決指南。當他們遇到電力問題時,他們會通過所有步驟來解決問題,最後一步是驗證設備費用。所以我試圖讓它鏈接到收費問題的步驟,而不是讓他們從選擇收音機重新開始。沒什麼大不了的,只是想讓它變成白癡證明。 –

0

好了,在這裏我已經添加了隨之而來的步驟,可以分成一些類別(這裏:3),如果選擇一些類別一步,你將剛纔讀它。希望有幫助;)

<html> 
<head></head> 
<body> 
<div id="mainDiv" style="text-align: center"> 
    <div id="textDiv"></div> 
    <div id="radioDiv"> 
     <input type="radio" id="rad1" name="radGrp"><label for="rad1">1. reinstall os (step 1)</label><br> 
     <input type="radio" id="rad2" name="radGrp"><label for="rad2">2. reinstall os (step 2)</label><br> 
     <input type="radio" id="rad3" name="radGrp"><label for="rad3">3. reinstall os (step 3)</label><br> 
     <input type="radio" id="rad4" name="radGrp"><label for="rad4">4. reinstall os (step 4)</label><br> 
     <input type="radio" id="rad5" name="radGrp"><label for="rad5">5. watering a plant (step 1)</label><br> 
     <input type="radio" id="rad6" name="radGrp"><label for="rad6">6. watering a plant (step 2)</label><br> 
     <input type="radio" id="rad7" name="radGrp"><label for="rad7">7. reading alphabet (step 1)</label><br> 
     <input type="radio" id="rad8" name="radGrp"><label for="rad8">8. reading alphabet (step 2)</label><br> 
     <input type="radio" id="rad9" name="radGrp"><label for="rad9">9. reading alphabet (step 3)</label><br> 
     <input type="radio" id="rad10" name="radGrp"><label for="rad10">10. reading alphabet (step 4)</label><br> 
    </div> 
    <div id="btnDiv"> 
     <input type="button" id="btn" value="show"><br> 
    </div> 
</div> 
    <script type="text/javascript"> 

     document.getElementById("btn").onclick = function(){formContent();}; 

     var radios = document.getElementsByName("radGrp"), 
      idCurrent = 0, 
      planCurrent, 
      firstRun = true, 
      instructions = [ 
       [0,1,2,3], /* your instruction plans */ 
       [4,5], /* this is the second plan (with index = 1) and it has steps 5 and 6 */ 
       [6,7,8,9] /* this is the third plan (with index = 2) and it has steps 7, 9, 9 and 10 */ 
      ], 
      textContent = [ 
       "<h3>reinstall os (step 1)</h3><p>download .iso from torrent</p>", 
       "<h3>reinstall os (step 2)</h3><p>burn it to a cd of usb</p>", 
       "<h3>reinstall os (step 3)</h3><p>change bios settings</p>", 
       "<h3>reinstall os (step 4)</h3><p>boot, install, enjoy</p>", 
       "<h3>watering a plant (step 1)</h3><p>pour some water into a flask</p>", 
       "<h3>watering a plant (step 2)</h3><p>water the plant, enjoy</p>", 
       "<h3>reading alphabet (step 1)</h3><p>read letter \"a\"</p>", 
       "<h3>reading alphabet (step 2)</h3><p>read letter \"b\"</p>", 
       "<h3>reading alphabet (step 3)</h3><p>read letter \"c\"</p>", 
       "<h3>reading alphabet (step 4)</h3><p>read all the other letters, enjoy</p>" 
      ]; 

     function hideDivs(){ 
      document.getElementById("textDiv").style.display = "block"; 
      document.getElementById("radioDiv").style.display = "none"; 
      document.getElementById("btn").value = "next"; 
      firstRun = false; 
     } 

     function restoreDivs(){ 
      document.getElementById("textDiv").style.display = "none"; 
      document.getElementById("radioDiv").style.display = "block"; 
      document.getElementById("btn").value = "show"; 
      idCurrent=0; 
      firstRun = true; 
     } 

     /*function to find the id of a checked radio from the group*/ 
     function findChecked(){ 
      for (var i=0; i<radios.length; i++) { 
       if (radios[i].checked) idCurrent = radios[i].id; 
      } 
      idCurrent = parseInt(idCurrent.slice(3))-1; 
     } 

     /*find which plan checked id belongs*/ 
     function findPlan(){ 
      for (var m=0;m<instructions.length;m++){ 
       for (var n=0;n<instructions[m].length;n++){ 
        if (instructions[m][n] == idCurrent) planCurrent = m; 
       } 
      } 
     } 

     /*actual function*/ 
     function formContent(){ 
      if (firstRun) { 
       findChecked(); 
       findPlan(); 
       hideDivs(); 
      } 
      /*pushing into textDiv values from textContent array, which is your pages content*/ 
      document.getElementById("textDiv").innerHTML = textContent[idCurrent]; 

      /*check that we read just the current plan*/ 
      if (idCurrent < instructions[planCurrent][instructions[planCurrent].length - 1]){ 
       idCurrent++; 
      } else if (idCurrent == instructions[planCurrent][instructions[planCurrent].length - 1]) { 
       idCurrent++; 
       document.getElementById("btn").value = "finish!"; 
      } else { 
       restoreDivs(); 
      } 
     } 
    </script> 
</body> 
</html> 
+0

,或者您可以將這些類別按其名稱分成不同的廣播組,並使用以前的版本。 –

相關問題