2016-06-13 177 views
0

這是我目前想出的代碼。它填寫正確的標題,但頁面在頁面標題匹配時不可見。我該如何解決這個問題? 「如果頁面標題,執行此代碼」的正確方法是什麼?Javascript:使一個div可見/不可見基於頁面標題

<head> 
    <title>Page Name 1</title> 
</head> 
<body> 
    <style> 
     #notavailablemsg { 
     font-size: 30px; 
     color: #f04e37; 
     display: inline; 
     } 
     #notavailablemsg div { 
     display: inline; 
     visibility: hidden; 
     } 
     #submsg { 
     font-size: 22px; 
     visibility: hidden; 
     } 
     #pagename { 
     font-style: italic; 
     } 
    </style> 
    <center> 
     <div id="notavailablemsg"> 
      <div>The page </div> 
      <br> 
      <div id="pagename">page title</div> 
      <div> no longer exists</div> 
     </div> 
     <div id="submsg"> 
      We are sorry for the inconvenience. 
     </div> 
    </center> 
    <script> 
     var errortitle = document.getElementsByTagName("title")[0].innerHTML; 
     document.getElementById("pagename").innerHTML = errortitle; 
    </script> 
    <script> 
     if (errortitle == "Page Name 1") { 
      document.getElementByID("notavailablemsg").innerHTML.style.visibility = "visible"; 
      document.getElementByID("submsg").innerHTML.style.visibility = "visible"; 
     } 

    </script> 
</body> 
</html> 

@Midas回答:修改到

document.getElementById("notavailablemsg").style.visibility = "visible"; 
document.getElementById("submsg").style.visibility = "visible"; 
+0

你是否有意翻轉你的'if'語句?現在,如果'errortitle'確實不**等於''頁面名稱1「',那麼你就可以運行它。 – Jack

+2

'document.getElementByID(「submsg」)。innerHTML.style.visibility'應該是'document.getElementById(「submsg」)。style.visibility'。注意'getElementById'中的小d。 – Midas

+0

我會建議檢查另一個變量,然後標題,如果這是可能的原因? –

回答

0

您可以使用document.title時獲得當前的標題。

<!DOCTYPE html> 
<html> 
<head> 
    <title>YourGoodTitle</title> 
    <style> 
    div { 
     border: 1px solid red; 
     width: 100%; 
     height: 50px; 
     display: none; /* its good to use display: none to hide elements*/ 
    } 
    </style> 
</head> 

<body onload="myFunction()"> 

<h1>Hello World!</h1> 
<center> 
    <div id="notavailablemsg"> 
    Bad title 
    </div> 
    <div id="availablemsg"> 
    Glad you are here 
    </div> 
</center> 
<script> 
function myFunction() { 
    var title = document.title; 
    if(title == "YourGoodTitle") { 
     // select and make elements visible 
     document.getElementById("availablemsg").style.display = "block"; 
    } else { 
     // hide the elements you want, make their display = none; 
     // for example 

     document.getElementById("availablemsg").style.display = "none"; 

     // show your expected elements 
     document.getElementById("notavailablemsg").style.display = "block"; 
     } 
} 
</script> 

</body> 
</html> 

https://plnkr.co/edit/KS2obzXrUqtzT8FWUvwL?p=preview

所以,如果你的標題是YourGoodTitle,將顯示YourGoodTitle消息。否則不好的標題將被打印

+0

好點,但不解決問題 – Midas

+0

是啊......我只是不小心按下提交按鈕。我正在編輯它 –