2016-11-13 60 views
-1

我似乎可以得到innerHTML的工作,我想打印的商品標籤使用p標籤內隨機生成的名稱,但出於某種原因它不工作。我對js很新,所以一切都有點草率。 我不想給你這個巨大的混亂,但我不能弄明白。 在此先感謝。的innerHTML不會工作

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
       body{background-image: url("webbg.png"); background-position: absolute;} 
       div.container{ width: 100%; border: 1px solid black;} 
       header, footer{padding: 1em; color: white; background-color: rgba(0, 0, 0, 0.9);} 
       nav{float: left; height: 582px; width: 160px; overflow: hidden; background-color: rgba(30, 30, 30, 0.8);} 
       article{text-align: left; height: 550px; border-left: 1px solid black; padding: 1em; overflow: hidden; background-color: rgba(160, 160, 160, 0.6);} 
       table{border-collapse: collapse;} 
       th, td{text-align: left; padding: 8px;} 
       tr:nth-child(even){background-color: rgba(0, 0, 0, 0.3);} 
       tr:hover {background-color: rgba(120, 120, 120, 0.4);} 
       td{padding: 8px} 
       a:link, a:visited {color: white; text-decoration: none; cursor: pointer;} 
     </style> 
     <script> 
      function myFunction() { 

       var prefix = ["Breeze", "Earth", "Hide", "River", "Wood", "Oak", "Spruce", "Birch", "Yellow", "Black", "White", "Down", "Up", "Big", "Little", "Water", "Metal", "Mane", "Grey", "Stone", "Bright", "Mellow","Angle","Anvil","Battle","Bear","Blue","Boom","Crow","Daisy","Dark","Dawn","Day","Death","Dragon","Drake","Thunder","Dune","Dusk","Earth","Emerald","Fairy","Fire","Foe","Frog","Frost","Ghost","Gian","Gold","Golden","Green","Griffin","Hawk","Hex","Ice","Iron","Jade","Legend","Life","Light","Lion","Lotus","Mist","Moon","Myth","Night","Ogre","Owl","Pearl","Pixie","Rain","Rainbow","Raven","Red","Rose","Ruby","Sand","Sea","Shadow","Silver","Skull","Sky","Soul","Sparkle","Spell","Spirit","Sprite","Star","Storm","Story","Strong","Summer","Sun","Swift","Tale","Thunder","Titan","Troll","Unicorn","Water","Wild","Willow","Wind","Winter","Wyrm"]; 
       var suffix = ["Breeze", "Earth", "Sun", "Moon", "Iron", "Hide", "River", "Wood", "Hammer", "Sword", "Shield", "Beard", "Back", "Chest", "Wind", "Light", "Fire", "Water", "Metal", "Ice", "Thunder", "Mane", "Spear", "Lance", "Axe", "Stone", "Dark", "Bright", "Star", "Mist","","Bane","Blade","Blood","Bloom","Blossom","Brand","Breaker","Breath","Bringer","Caller","Caster","Catcher","Cloud","Haven","Crafter","Dreamer","Dust","Eyes","Finder","Fist","Flame","Flower","Forge","Fountain","Friend","Garden","Giver","Gem","Glade","Glass","Glen","Grove","Hand","Haven","Head","Heart","Horn","Hunter","Leaf","Mancer","Mask","Mender","Pants","Petal","Pyre","Rider","Runner","Shade","Shard","Shield","singer","Slinger","Smith","Song","Spear","Staff","Stalker","Steed","Strider","Tail","Talon","Tamer","Thief","Thistle","Thorn","Vault","Walker","Ward","Weave","Weaver","Whisper","Wielder","Welder","Wraith"]; 
       var fPre = ["Aar","Arc","Ali","And","Ash","Ank","Bel","Ben","Bas","Bir","Bri","Boh","Ban","Cal","Cri","Cra","Chi","Cor","Cul","Din","Dan","Don","Dul","Dek","Ent","Erg","Eva","Ela","Edo","Eso","Fal","Fel","Fen","Fir","Flo","Fra","Fer","Gal","Gen","Gra","Gro","Gin","Gon","Hen","Har","Hil","Hel","Hak","Hon","Her","Ima","Ing","Iro","Ilk","Isa","Iso","Jar","Jen","Joh","Jon","Jal","Jah","Jel","Kil","Kal","Kah","Kon","Kii","Klo","Kas","Lla","Lin","Lad","Lem","Lia","Lis","Lor","Man","Mac","Mar","Min","Mis","Mes","Mek","Nor","Nil","Nek","Nas","Ner","Opa","Ora","Ons","Ohk","Oli","Orc","Org","Pen","Pah","Pek","Pil","Pol","Poh","Qui","Qua","Que","Quo","Ren","Rin","Rah","Rom","Ral","Res","Ror","Ser","Sar","Sin","Sis","Sal","Sen","Sol","Tia","Tio","Tin","Ten","Tal","Tic","Toc","Tha","Umi","Uma","Ulo","Uhr","Ung","Vir","Van","Val","Von","Vas","Vin","Wil","Won","Wis","Was","Wel","Wic","Woc","Xav","Xor","Xal","Xir","Xen","Xio","Yir","Yen","Yal","Yow","Yor","Yac","Yin","Yar","Zin","Zan","Zen","Zim","Zor","Zal","Zig"]; 
       var fSuf = ["Aar","Arc","Ali","And","Ash","Ank","Bel","Ben","Bas","Bir","Bri","Boh","Ban","Cal","Cri","Cra","Chi","Cor","Cul","Din","Dan","Don","Dul","Dek","Ent","Erg","Eva","Ela","Edo","Eso","Fal","Fel","Fen","Fir","Flo","Fra","Fer","Gal","Gen","Gra","Gro","Gin","Gon","Hen","Har","Hil","Hel","Hak","Hon","Her","Ima","Ing","Iro","Ilk","Isa","Iso","Jar","Jen","Joh","Jon","Jal","Jah","Jel","Kil","Kal","Kah","Kon","Kii","Klo","Kas","Lla","Lin","Lad","Lem","Lia","Lis","Lor","Man","Mac","Mar","Min","Mis","Mes","Mek","Nor","Nil","Nek","Nas","Ner","Opa","Ora","Ons","Ohk","Oli","Orc","Org","Pen","Pah","Pek","Pil","Pol","Poh","Qui","Qua","Que","Quo","Ren","Rin","Rah","Rom","Ral","Res","Ror","Ser","Sar","Sin","Sis","Sal","Sen","Sol","Tia","Tio","Tin","Ten","Tal","Tic","Toc","Tha","Umi","Uma","Ulo","Uhr","Ung","Vir","Van","Val","Von","Vas","Vin","Wil","Won","Wis","Was","Wel","Wic","Woc","Xav","Xor","Xal","Xir","Xen","Xio","Yir","Yen","Yal","Yow","Yor","Yac","Yin","Yar","Zin","Zan","Zen","Zim","Zor","Zal","Zig","an","al","ad","ab","as","are","bo","ber","bis","ba","bu","ca","cas","ca","co","ce","car","ci","de","di","do","da","du","dy","del","dra","en","ea","eo","elm","ent","fa","fe","fo","fu","far","fez","flu","ga","ge","go","gu","gi","gir","grin","gore","hi","ha","hu","ho","he","hels","heat","hint","ing","io","ia","ie","iu","ire","irk","iron","isal","je","jo","ji","ja","ju","ka","ke","ki","ko","ku","kin","kar","kia","kio","lo","la","li","lu","le","lal","lyra","me","mo","ma","mira","may","na","ne","no","ni","nie","neli","nira","nera","orga","oa","ols","omp","pa","pe","pi","po","pron","preh","perk","pins","re","ra","ri","ro","rola","rigs","sa","so","se","si","sings","stra","to","ta","te","ti","tien","tora","tram","ual","uol","uro","uru","va","ve","vi","vo","viral","vosh","vent","wa","we","wo","wi","wank","wick","whel","wen","xe","xa","xi","xo","xu","xion","yi","ye","yo","ya","yarl","yahs","yelo","ze","za","zo","zi","zing","zick","ziff","","","","","","","","","","","","","","","","","",""];    
       for(i=0;i<10;i++){ 

        var pre = prefix[Math.floor(Math.random() * prefix.length)].toString(); 
        var suf = suffix[Math.floor(Math.random() * suffix.length)].toString(); 
        var fPref = fPre[Math.floor(Math.random() * fPre.length)].toString(); 
        var fSuff = fSuf[Math.floor(Math.random() * fSuf.length)].toString(); 
        var newPar = document.createElement('p'); 
        var newText = document.createTextNode(fPref+fSuff.toLowerCase()+" "+pre+suf); 
        newPar.appendChild(newText); 
        document.getElementById("demo").appendChild(newPar); 
      } 
     </script> 
    </head> 

    <body onload="myFunction()"> 
     <div class="container"> 
      <header> 
       <img src="title.png" height="50" width="250"> 
      </header> 
      <nav> 
       <table width="2000"> 
        <tr> 
         <td><p><font color="white"><a href="webHome.html">HOME</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="webGenerator.html">NAME GENERATOR</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="webMap.html">MAP</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="www.google.com">RACES</a></font></p></td>      
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="www.google.com">GETTING STARTED</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="www.google.com">GENERAL PLAY</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="www.google.com">COMBAT</a></font></p></td> 
        </tr> 
        <tr> 
         <td><p><font color="white"><a href="www.google.com">ABOUT</a></font></p></td> 
        </tr> 
       </table> 
      </nav> 
      <article id="demo"> 
      </article> 
     </div> 

    </body> 
</html> 
+0

> Ticjon UnicornThief – Feathercrown

+0

大聲笑,我不知道你是什麼首先談論。 – YesIPeeRainbows

+0

哈哈,是的。儘管如此,我確實喜歡這些名字。 – Feathercrown

回答

1

您的腳本缺少一個右括號}。到了最後,左括號匹配的for循環,你需要更多的1,關閉一個由myFunction

打開

function myFunction() { 
 

 
    var prefix = ["Breeze", "Earth", "Hide", "River", "Wood", "Oak", "Spruce", "Birch", "Yellow", "Black", "White", "Down", "Up", "Big", "Little", "Water", "Metal", "Mane", "Grey", "Stone", "Bright", "Mellow", "Angle", "Anvil", "Battle", "Bear", "Blue", "Boom", "Crow", "Daisy", "Dark", "Dawn", "Day", "Death", "Dragon", "Drake", "Thunder", "Dune", "Dusk", "Earth", "Emerald", "Fairy", "Fire", "Foe", "Frog", "Frost", "Ghost", "Gian", "Gold", "Golden", "Green", "Griffin", "Hawk", "Hex", "Ice", "Iron", "Jade", "Legend", "Life", "Light", "Lion", "Lotus", "Mist", "Moon", "Myth", "Night", "Ogre", "Owl", "Pearl", "Pixie", "Rain", "Rainbow", "Raven", "Red", "Rose", "Ruby", "Sand", "Sea", "Shadow", "Silver", "Skull", "Sky", "Soul", "Sparkle", "Spell", "Spirit", "Sprite", "Star", "Storm", "Story", "Strong", "Summer", "Sun", "Swift", "Tale", "Thunder", "Titan", "Troll", "Unicorn", "Water", "Wild", "Willow", "Wind", "Winter", "Wyrm"]; 
 
    var suffix = ["Breeze", "Earth", "Sun", "Moon", "Iron", "Hide", "River", "Wood", "Hammer", "Sword", "Shield", "Beard", "Back", "Chest", "Wind", "Light", "Fire", "Water", "Metal", "Ice", "Thunder", "Mane", "Spear", "Lance", "Axe", "Stone", "Dark", "Bright", "Star", "Mist", "", "Bane", "Blade", "Blood", "Bloom", "Blossom", "Brand", "Breaker", "Breath", "Bringer", "Caller", "Caster", "Catcher", "Cloud", "Haven", "Crafter", "Dreamer", "Dust", "Eyes", "Finder", "Fist", "Flame", "Flower", "Forge", "Fountain", "Friend", "Garden", "Giver", "Gem", "Glade", "Glass", "Glen", "Grove", "Hand", "Haven", "Head", "Heart", "Horn", "Hunter", "Leaf", "Mancer", "Mask", "Mender", "Pants", "Petal", "Pyre", "Rider", "Runner", "Shade", "Shard", "Shield", "singer", "Slinger", "Smith", "Song", "Spear", "Staff", "Stalker", "Steed", "Strider", "Tail", "Talon", "Tamer", "Thief", "Thistle", "Thorn", "Vault", "Walker", "Ward", "Weave", "Weaver", "Whisper", "Wielder", "Welder", "Wraith"]; 
 
    var fPre = ["Aar", "Arc", "Ali", "And", "Ash", "Ank", "Bel", "Ben", "Bas", "Bir", "Bri", "Boh", "Ban", "Cal", "Cri", "Cra", "Chi", "Cor", "Cul", "Din", "Dan", "Don", "Dul", "Dek", "Ent", "Erg", "Eva", "Ela", "Edo", "Eso", "Fal", "Fel", "Fen", "Fir", "Flo", "Fra", "Fer", "Gal", "Gen", "Gra", "Gro", "Gin", "Gon", "Hen", "Har", "Hil", "Hel", "Hak", "Hon", "Her", "Ima", "Ing", "Iro", "Ilk", "Isa", "Iso", "Jar", "Jen", "Joh", "Jon", "Jal", "Jah", "Jel", "Kil", "Kal", "Kah", "Kon", "Kii", "Klo", "Kas", "Lla", "Lin", "Lad", "Lem", "Lia", "Lis", "Lor", "Man", "Mac", "Mar", "Min", "Mis", "Mes", "Mek", "Nor", "Nil", "Nek", "Nas", "Ner", "Opa", "Ora", "Ons", "Ohk", "Oli", "Orc", "Org", "Pen", "Pah", "Pek", "Pil", "Pol", "Poh", "Qui", "Qua", "Que", "Quo", "Ren", "Rin", "Rah", "Rom", "Ral", "Res", "Ror", "Ser", "Sar", "Sin", "Sis", "Sal", "Sen", "Sol", "Tia", "Tio", "Tin", "Ten", "Tal", "Tic", "Toc", "Tha", "Umi", "Uma", "Ulo", "Uhr", "Ung", "Vir", "Van", "Val", "Von", "Vas", "Vin", "Wil", "Won", "Wis", "Was", "Wel", "Wic", "Woc", "Xav", "Xor", "Xal", "Xir", "Xen", "Xio", "Yir", "Yen", "Yal", "Yow", "Yor", "Yac", "Yin", "Yar", "Zin", "Zan", "Zen", "Zim", "Zor", "Zal", "Zig"]; 
 
    var fSuf = ["Aar", "Arc", "Ali", "And", "Ash", "Ank", "Bel", "Ben", "Bas", "Bir", "Bri", "Boh", "Ban", "Cal", "Cri", "Cra", "Chi", "Cor", "Cul", "Din", "Dan", "Don", "Dul", "Dek", "Ent", "Erg", "Eva", "Ela", "Edo", "Eso", "Fal", "Fel", "Fen", "Fir", "Flo", "Fra", "Fer", "Gal", "Gen", "Gra", "Gro", "Gin", "Gon", "Hen", "Har", "Hil", "Hel", "Hak", "Hon", "Her", "Ima", "Ing", "Iro", "Ilk", "Isa", "Iso", "Jar", "Jen", "Joh", "Jon", "Jal", "Jah", "Jel", "Kil", "Kal", "Kah", "Kon", "Kii", "Klo", "Kas", "Lla", "Lin", "Lad", "Lem", "Lia", "Lis", "Lor", "Man", "Mac", "Mar", "Min", "Mis", "Mes", "Mek", "Nor", "Nil", "Nek", "Nas", "Ner", "Opa", "Ora", "Ons", "Ohk", "Oli", "Orc", "Org", "Pen", "Pah", "Pek", "Pil", "Pol", "Poh", "Qui", "Qua", "Que", "Quo", "Ren", "Rin", "Rah", "Rom", "Ral", "Res", "Ror", "Ser", "Sar", "Sin", "Sis", "Sal", "Sen", "Sol", "Tia", "Tio", "Tin", "Ten", "Tal", "Tic", "Toc", "Tha", "Umi", "Uma", "Ulo", "Uhr", "Ung", "Vir", "Van", "Val", "Von", "Vas", "Vin", "Wil", "Won", "Wis", "Was", "Wel", "Wic", "Woc", "Xav", "Xor", "Xal", "Xir", "Xen", "Xio", "Yir", "Yen", "Yal", "Yow", "Yor", "Yac", "Yin", "Yar", "Zin", "Zan", "Zen", "Zim", "Zor", "Zal", "Zig", "an", "al", "ad", "ab", "as", "are", "bo", "ber", "bis", "ba", "bu", "ca", "cas", "ca", "co", "ce", "car", "ci", "de", "di", "do", "da", "du", "dy", "del", "dra", "en", "ea", "eo", "elm", "ent", "fa", "fe", "fo", "fu", "far", "fez", "flu", "ga", "ge", "go", "gu", "gi", "gir", "grin", "gore", "hi", "ha", "hu", "ho", "he", "hels", "heat", "hint", "ing", "io", "ia", "ie", "iu", "ire", "irk", "iron", "isal", "je", "jo", "ji", "ja", "ju", "ka", "ke", "ki", "ko", "ku", "kin", "kar", "kia", "kio", "lo", "la", "li", "lu", "le", "lal", "lyra", "me", "mo", "ma", "mira", "may", "na", "ne", "no", "ni", "nie", "neli", "nira", "nera", "orga", "oa", "ols", "omp", "pa", "pe", "pi", "po", "pron", "preh", "perk", "pins", "re", "ra", "ri", "ro", "rola", "rigs", "sa", "so", "se", "si", "sings", "stra", "to", "ta", "te", "ti", "tien", "tora", "tram", "ual", "uol", "uro", "uru", "va", "ve", "vi", "vo", "viral", "vosh", "vent", "wa", "we", "wo", "wi", "wank", "wick", "whel", "wen", "xe", "xa", "xi", "xo", "xu", "xion", "yi", "ye", "yo", "ya", "yarl", "yahs", "yelo", "ze", "za", "zo", "zi", "zing", "zick", "ziff", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]; 
 
    for (i = 0; i < 10; i++) { 
 

 
     var pre = prefix[Math.floor(Math.random() * prefix.length)].toString(); 
 
     var suf = suffix[Math.floor(Math.random() * suffix.length)].toString(); 
 
     var fPref = fPre[Math.floor(Math.random() * fPre.length)].toString(); 
 
     var fSuff = fSuf[Math.floor(Math.random() * fSuf.length)].toString(); 
 
     var newPar = document.createElement('p'); 
 
     var newText = document.createTextNode(fPref + fSuff.toLowerCase() + " " + pre + suf); 
 
     newPar.appendChild(newText); 
 
     document.getElementById("demo").appendChild(newPar); 
 
    } 
 
    } 
 

 
myFunction();
body { 
 
    background-image: url("webbg.png"); 
 
    background-position: absolute; 
 
} 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
header, 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: rgba(0, 0, 0, 0.9); 
 
} 
 
nav { 
 
    float: left; 
 
    height: 582px; 
 
    width: 160px; 
 
    overflow: hidden; 
 
    background-color: rgba(30, 30, 30, 0.8); 
 
} 
 
article { 
 
    text-align: left; 
 
    height: 550px; 
 
    border-left: 1px solid black; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    background-color: rgba(160, 160, 160, 0.6); 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
th, 
 
td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
} 
 
tr:hover { 
 
    background-color: rgba(120, 120, 120, 0.4); 
 
} 
 
td { 
 
    padding: 8px 
 
} 
 
a:link, 
 
a:visited { 
 
    color: white; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}
<div class="container"> 
 
    <header> 
 
    <img src="title.png" height="50" width="250"> 
 
    </header> 
 
    <nav> 
 
    <table width="2000"> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="webHome.html">HOME</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="webGenerator.html">NAME GENERATOR</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="webMap.html">MAP</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="www.google.com">RACES</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="www.google.com">GETTING STARTED</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="www.google.com">GENERAL PLAY</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="www.google.com">COMBAT</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p><font color="white"><a href="www.google.com">ABOUT</a></font> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </nav> 
 
    <article id="demo"> 
 
    </article> 
 
</div>

+0

啊!我相信我錯過了!謝謝 :) – YesIPeeRainbows