不能讓childNode（message）根本沒有顯示

我已經嘗試了很多不同的方法來刪除孩子，沒有任何工作如此可憐，它有一定程度上，要麼我沒有消息或我繼續收到只是增加了跨度而不刪除其他信息不能讓childNode（message）根本沒有顯示

嘗試閱讀如何刪除孩子，並嘗試了各種不同的方式，我發現刪除它，我的代碼可能是錯誤的創建孩子並附加它等等，因爲這是我第一次使用這種方式。用while循環嘗試刪除，並且已經在代碼中用firstChild標記了一個。並用不同的名字代替味精。

我的代碼看起來像這樣在我的腳本：

function validateName(input, id) 
{ 
    var res = true; 
    var msg = document.getElementById(id); 
    var error = document.createElement("span"); 
    var errorMsg = ""; 

    if (input == "" || input < 2) { 
     res = false; 
    //  removeChildren(msg); 
      errorMsg = document.createTextNode("Input is to short!"); 
      error.appendChild(errorMsg); 
      id.appendChild(error); 
    } 
    if (input >= 2 && input.match(/\d/)) { 
     res = false; 
    //  removeChildren(msg); 
      errorMsg = document.createTextNode("Name contains a number!"); 
      error.appendChild(errorMsg); 
      id.appendChild(error); 
    } 
    if (input >= 2 && !input.match(/\d/)) { 
     res = true; 
    //  removeChildren(msg); 
    } 
    return res; 
}

我的小測試頁：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
     <script src="Validator.js"></script> 
     <script> 
      function v1(e,id) {   
       if(validateName(document.form1.namefield.value, id) == false) { 
        document.getElementById("be").src="NotOkSmall.jpg"; 
       } 
       if(validateName(document.form1.namefield.value) == true) { 
        document.getElementById("be").src="OkSmall.jpg";  
       } 
      } 
     </script> 
    </head> 
    <body> 
     <h1>Validation testing, HO!</h1> 
     <form name="form1" action="submit"> 
      <div id="div1"> 
       <input type="text" name ="namefield" id="f1" onkeydown="v1(be, div1)" > 
       <image id="be" src="NotOkSmall.jpg" alt="OkSmall.jpg" /> 
      </div> 
      <input type="button" value="GO" onClick="v1(be)"> 
     </form> 
    </body> 
</html>

如果任何人有任何想法，使工作我一個，會是一件很幸福傢伙:)，就像我之前說過的，我甚至不確定在這種情況下創建孩子是否正確。但是因爲它在我刪除removeChildren時起作用，它確實寫入正確的消息，只是不刪除它們中的任何一個。所以一定要努力..

謝謝。

來源

2012-11-03 user1796376

您的代碼中有一些錯誤，例如id.appendChild(error);，您必須使用msg.appendChild(error);。無論如何，我沒有看到在這種情況下需要追加/刪除子節點。只需使用隱藏的錯誤佔位符並在想要顯示錯誤消息時顯示它。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>JSP Page</title> 
     <script src="Validator.js"></script> 
     <script> 
      function v1(imgId) { 
       var img = document.getElementById(imgId), 
        val = document.form1.namefield.value; 
       img.src = img.alt = validateName(val) 
        ? "OkSmall.jpg" 
        : "NotOkSmall.jpg"; 
      } 
     </script> 
    </head> 
    <body> 
     <h1>Validation testing, HO!</h1> 
     <form name="form1" action="submit"> 
      <div id="div1"> 
       <input type="text" name ="namefield" id="f1" onkeyup="v1('be');" > 
       <image id="be" src="NotOkSmall.jpg" alt="NotOkSmall.jpg" /> 
       <span id="error-message" class="invis"></span> 
      </div> 
      <input type="button" value="GO" onClick="v1('be');"> 
     </form> 
    </body> 
</html>

CSS：

.invis { 
    display: none; 
}

的JavaScript：

function validateName(input) { 
    var res = true, 
     errorMsg, 
     errorContainer = document.getElementById('error-message'); 

    if(input.length < 2) { 
     res = false; 
     errorMsg = "Input is to short!"; 
    } 

    if(input.length >= 2 && /\d/.test(input)) { 
     res = false; 
     errorMsg = "Name contains a number!"; 
    } 

    if(res) { 
     errorContainer.style.display = 'none'; 
    } else { 
     errorContainer.innerHTML = errorMsg; 
     errorContainer.style.display = 'inline'; 
    } 

    return res; 
}

DEMO

來源

2012-11-03 13:48:51

感謝這是非常感謝，似乎很容易然後childNodes，我只有一個問題，首先我試圖糾正我的代碼到你的例子，然後它沒有工作，然後我只是copyied一切到新的文件和再次嘗試，但無濟於事，即使你的例子和我的副本是相同的。 – user1796376

我創建了一個名爲invis.css的文件，裏面有你的CSS代碼，也嘗試在html中編寫一個但是也不能正常工作，我相信它是CSS，代碼與您的代碼完全相同，我唯一不確定的是CSS部分。由於您的DEMO的作品美麗！ – user1796376

也許一些現有的樣式正在覆蓋'invis.css'中的規則。你可以像'＃div1> span.invis'那樣設置更具體的CSS選擇器，或者用'style =「display：none;」' –

不能讓childNode（message）根本沒有顯示

回答

相關問題