的JavaScript的innerHTML返回一個錯誤

基本上繼承人我的代碼：的JavaScript的innerHTML返回一個錯誤

<html> 
    <head> 
    <script> 
    function promptSignIn(){ 
    var promptbox = document.getElementById('promptbox'); 

    var xml = '<ul style="list-style-type:none;margin-left:-25px;"> 
    <li style="font-family:sans-serif;font-size:15;">You must Sign in to access great things...</li> 
    <li><br></li> 
    <li style="font-family:sans-serif;">Enter Your Email Address:<br><div style="width:280px;height:45px;-webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid lightgrey;margin-left:-10px;"><input style="-webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);border:0px;width:280;height:45px;" type="text" value="" name="username"/> </div> 
    <br> 

    <li style="font-family:sans-serif;">Enter Your Password:<br><div style="width:280px;height:45px;-webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid lightgrey;margin-left:-10px;"><input style="-webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);border:0px;width:280;height:45px;" type="password" value="" name="password"/> </div> 
    <br> 
    <li><input type="submit" value="Sign in" style="margin-left:-10px;width:280px;height:40px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE); 
    background: -o-linear-gradient(#2B65EC, #2B60DE); 
    background: -moz-linear-gradient(#2B65EC, #2B60DE); 
    background: linear-gradient(#2B65EC, #2B60DE);color:#fff;"/> 
    </ul> 
    </form>'; 


    if(promptbox.style.visibility == "hidden"){ 
    promptbox.style.visibility = "visible"; 
    promptbox.innerHTML = xml; 
    }else{ 
    promptbox.style.visibility = "hidden"; 
    promptbox.innerHTML = ""; 
    } 
    } 
    </script> 
    <title>Droid - Social Networking Platform</title> 
    <meta name="description" content="Welcome to Droid, Login or signup to continue"> 
    </head> 
    <body> 
    <style> 
    body{ 
    margin:0px; 
    } 
    #navbar{ 
    margin-top:0px;margin-right:0px;margin-left:0px;height:125px; 
    background: -webkit-linear-gradient(#e1e1e1, #e6e6e6); 
    background: -o-linear-gradient(#e1e1e1, #e6e6e6); 
    background: -moz-linear-gradient(#e1e1e1, #e6e6e6); 
    background: linear-gradient(#e1e1e1, #e6e6e6); 
    border-bottom:2px solid #306EFF 
    } 

    </style> 
    <div id="navbar"> 
    <a href="index"> 
     <img src="image;/logo.png" width="200" height="85" style="margin:8px;"> 
    </a> 

    <div id="searchbg" style="margin-top:-75px;margin-left:245px;width:440px;height:45px;background: -webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid grey;border-radius:4px;"> 
    <form method="get" action="search.php" autocomplete="off"> 
    <input type="text" style="margin-left:5px;background: -webkit-linear-gradient(#e4e4e4, #e9e9e9); 
    background: -o-linear-gradient(##e4e4e4, #e9e9e9); 
    background: -moz-linear-gradient(#e4e4e4, #e9e9e9); 
    background: linear-gradient(#e4e4e4, #e9e9e9);width:430px;height:45px;border:0px;" value="Search" name="query"> 

<input type="submit" value="Search" style="margin:-45px;margin-left:380px;width:60px;height:45px;border-top-right-radius:4px;border-bottom-right-radius:4px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE); 
    background: -o-linear-gradient(#2B65EC, #2B60DE); 
    background: -moz-linear-gradient(#2B65EC, #2B60DE); 
    background: linear-gradient(#2B65EC, #2B60DE);color:#fff;"> 
     </form></div> 

    <button style="margin:-45px;margin-left:800px;border-radius:3px;width:60px;height:45px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE); 
    background: -o-linear-gradient(#2B65EC, #2B60DE); 
    background: -moz-linear-gradient(#2B65EC, #2B60DE); 
    background: linear-gradient(#2B65EC, #2B60DE);color:#fff;" onclick="promptSignIn()">Sign in</button> 


    </div> 

    <div id="promptbox" style="margin: auto; margin-top: 130px; width:300px; height:400px;background: -webkit-linear-gradient(#e1e1e1, #e6e6e6); 
    background: -o-linear-gradient(#e1e1e1, #e6e6e6); 
    background: -moz-linear-gradient(#e1e1e1, #e6e6e6); 
    background: linear-gradient(#e1e1e1, #e6e6e6);border-radius:2px;border:1px solid grey;"> 
    <div id="prompttitle" style="width:100%;height:40px;margin:0px;border-bottom:1px solid lightgrey;"> 
    <h1 id="promptTitle" style="margin:3px;font-family:sans-serif;font-size:15;">Please Sign in</h1> 
    <img src="image;/close.png" width="20" height="20" style="margin-top:-25px;margin-left:280px;" onclick="closePrompt()"/> 
    </div> 
    <div id="promptContent" style="margin-top:45px;margin:auto;width:290px;height:350px;"> 

</div> 

    </div> 

    </body> 
    </html>

當用戶想要登錄我想讓他們看到的標誌promptbox在裏面，這1個箱將被使用所有的提示，所以即時需要它改變內部的HTML代碼，每次點擊一個不同的按鈕。任何建議，我是一個JavaScript的初學者。

來源

2014-06-21 ViperJohnnie

你的直列css使它真的很難閱讀... – blex

喲你不能在Javascript中有換行符，但爲什麼所有的內聯CSS呢？ – mplungjan

我習慣於這樣編程lol – ViperJohnnie

Live Demo

更改CSS不內聯
舉動上你的XML變種內容到promptContent
改變劇本

window.onload = function() { 
    document.getElementById('promptbox').style.display = "none"; 
    document.getElementById('signin').onclick = function() { 
    var promptbox = document.getElementById('promptbox'); 
    promptbox.style.display = promptbox.style.display == "none" ? "block" : "none" 
    } 
    document.getElementById('closePrompt').onclick = function() { 
    document.getElementById('promptbox').style.display = "none"; 
    } 
}

來源

2014-06-21 16:10:13 mplungjan

的JavaScript的innerHTML返回一個錯誤

回答

相關問題