按钮未显示

时间:2015-05-28 20:35:45

标签: javascript

页面翻页时,它有我的列表和显示和隐藏按钮。然而,当我沿着列表下去时,它假设显示图片和一些文字。但是我的按钮(隐藏和显示)消失了。即使发生这种情况,如何使它们出现? 谢谢你的帮助

        function imagechange(image)
        {
            mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'/>";
            mangasummary.innerHTML = changetext(mangasum[image],95);
                            readmanga.href = mangasite[image];

        }

        function changetext(text,num)
        {
            numChar = num;
            arrayWord = text.split(" ");
            str = "";
            strArray = new Array();
            newtext = "";
                for ( i = 0; i < arrayWord.length; i ++)
                {
                    if (str.length + arrayWord[i].length >= numChar)
                    {

                        newtext += str + "<br />";
                        str = ""
                    }

                    if (str.length + arrayWord[i].length <= numChar)
                    {   
                        str += arrayWord[i] + " ";
                    }

                    if (i == arrayWord.length-1)
                    {
                        newtext += str+ "<br />";
                    }

                }

            return newtext;
        }


    function hide()
        {
        document.getElementById("listm").style.display = "none";

            <tr>
                <td id = "mim" colspan ="2">

                <span id = "mangaim">
                </span>
                </td>


                <td id = "min">
                Manga List:<br />

                <select id= "listm" size = "15" onchange = "imagechange(this.value)">
                    <option value = "onepiece" id = "po"> One Piece </option>
                    <option value = "naruto" id = "po" > Naruto </option>
                    <option value = "bleach" id = "po"> Bleach </option>
                    <option value = "gintama" id = "po"> Gintama </option>
                    <option value = "nisekoi" id = "po"> Nisekoi </option>
                    <option value = "worldtrigger" id = "po"> World Trigger </option>
                    <option value = "psi" id = "po"> PSI Kusuo Saiki </option>
                    <option value = "ironknight" id = "po"> Iron Knight </option>
                    <option value ="stealth" id = "po"> Stealth Symphony </option>
                    <option value = "illegalrare" id = "po"> Illegal Rare </option>
                    <option value = "haikyu" id = "po"> Haikyu!! </option>
                    <option value = "kuroko" id = "po"> Kuroko No Basket </option>
                    <option value = "assassin" id = "po"> Assassination Classroom </option>
                    <option value = "shoku" id = "po"> Shokugeki no Soma</option>
                    <option value = "toriko" id = "po"> Toriko </option>
                </select>


                </td>
            </tr>

            <tr>
                <td colspan = "2">
                    <span id="ms">
                </td>
            </br>



    <button onclick = "hide()">Hide</button>
    <button onclick = "showlist()">Show List</button>   

    <script>
    mangaimage = document.getElementById("mangaim");
    mangasummary = document.getElementById("ms");
    readmanga = document.getElementById("rm");
    </script>
    </body>

1 个答案:

答案 0 :(得分:0)

非常棒的App Beta

以下更正的代码有效。一个潜在的问题是声明一个数组并试图像对象一样使用它:

var mangasum = new Array();
mangasum["onepiece"] = "some string";

您实际上可以使用关联索引访问数组。正如MDN所说:

  

有些人认为你不应该使用数组作为关联   阵列。在任何情况下,您都可以使用普通对象,尽管这样做   所以有自己的警告。查看帖子轻量级JavaScript   以任意键为例的字典。

参考:MDN Arrays

因此,错误可能是次要语法错误和大量格式错误的html的组合。由于浏览器的稳健性,它无论如何都会一瘸一拐。尽管代码很丑陋,但我开始钦佩OP自己写的意愿,至少尝试一下......这比我在SO上的很多帖子都要多说。

我将它留给OP来完成细节并使其成为一个很棒的应用程序:

运行要测试的代码段(图片省略)

<!DOCTYPE HTML>
<html>
   <head>
       <title>Demo</title>
   </head>    
   <body>
      <table>
         <tr>
            <td id = "mim" colspan ="2">
               <span id = "mangaim">
               </span>
            </td>
            <td id = "min">
               Manga List:<br />
               <select id= "listm" size = "15" onchange = "imagechange(this.value)">
                  <option value = "onepiece" id = "po"> One Piece </option>
                  <option value = "naruto" id = "po" > Naruto </option>
                  <option value = "bleach" id = "po"> Bleach </option>
                  <option value = "gintama" id = "po"> Gintama </option>
                  <option value = "nisekoi" id = "po"> Nisekoi </option>
                  <option value = "worldtrigger" id = "po"> World Trigger </option>
                  <option value = "psi" id = "po"> PSI Kusuo Saiki </option>
                  <option value = "ironknight" id = "po"> Iron Knight </option>
                  <option value = "stealth" id = "po"> Stealth Symphony </option>
                  <option value = "illegalrare" id = "po"> Illegal Rare </option>
                  <option value = "haikyu" id = "po"> Haikyu!! </option>
                  <option value = "kuroko" id = "po"> Kuroko No Basket </option>
                  <option value = "assassin" id = "po"> Assassination Classroom </option>
                  <option value = "shoku" id = "po"> Shokugeki no Soma</option>
                  <option value = "toriko" id = "po"> Toriko </option>
               </select>
            </td>
         </tr>
         <tr>
            <td colspan = "2">
               <span id="ms">
            </td>
            
         </tr>
      </table>
    
      <button onclick = "hide()">Hide</button>
      <button onclick = "showlist()">Show List</button>   
    
      <script type="text/javascript">
          
         var mangasum = {
             onepiece : "Gold Rogeet coveerso", 
             bleach : "Ichigo Kurosaki has always be", 
             stealth : "In a world where elves, dwar", 
             naruto : "In the village of Konohagakure", 
             kuroko : "Kuroko is a member from the l",
             gintama : "The story focuses on an ecc",
             nisekoi : "Raku Ichijou may be the heir to a y", 
             assassin : "A weird class kicks off in the super",
             shoku : "Yukihira Souma's dream is to become a fu", 
             worldtrigger : "A gate to another dimension has burs",
             haikyu : "A chance event triggerer",
             illegalrare : "Supernatural creatures live alongside",
             psi : "Saiki Kusuo has a wide array of superpowers at his",
             ironknight : "A boy with a body like steel encounters the"
         }
         
         function imagechange(image) {
             mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'>";
             mangasummary.innerHTML = changetext(mangasum[image], 95);
             readmanga.href = mangasite[image];
         }
         
         function changetext(text,num) {
             numChar = num;
             arrayWord = text.split(" ");
             str = "";
             strArray = new Array();
             newtext = "";
             for ( i = 0; i < arrayWord.length; i ++) {
                 if (str.length + arrayWord[i].length >= numChar) {
                     newtext += str + "<br />";
                     str = ""
                 }
         
                 if (str.length + arrayWord[i].length <= numChar) {   
                     str += arrayWord[i] + " ";
                 }
         
                 if (i == arrayWord.length-1) {
                     newtext += str+ "<br />";
                 }
         
             }
         
             return newtext;
         }
         
         
         function hide() {
             document.getElementById("listm").style.display = "none";
         }
         
         function showlist() {
             document.getElementById("listm").style.display = "block";
         }
         
         
         var mangaimage = document.getElementById("mangaim");
         var mangasummary = document.getElementById("ms");
         var readmanga = document.getElementById("rm");
         
      </script>
   </body>
</html>