innerHTML顯示不正確

我遇到的問題是，如果用戶將userdata輸入留空，我希望它將輸入和顯示文字作爲目標，通知他們這是必填字段。innerHTML顯示不正確

我使用innerHTML將消息發送到div或直接輸入字段，但不顯示任何內容。我也嘗試使用<p>,<span>，那也沒有工作。任何幫助表示讚賞。

<!doctype html> 
<html> 
    <head> 
    </head> 
    <body> 
    <form> 
     <input type="text" id="user1"> 
     <div id="error"></div> 
     <button onClick="test()">Work</button> 
    </form> 
    <script type="text/javascript"> 
     function test(){ 
     var userdata = document.getElementById("user1").value; 
     if(userdata == ""){ 
      document.getElementById("error").innerHTML="Please fill in Blanks"; 
     } 
     } 
    </script> 
    </body> 
</html>

來源

2013-07-20 Hugo

「我還試圖用\ n \ n和什麼已經工作「，\ n \ n'是什麼？ –

@LightStyle'\ n'是javascript中的一個新行字符。 – starbeamrainbowlabs

@starbeamrainbowlabs ROTFL我知道了，OP忘了用代碼引用''作爲他自己的標籤的分隔符，所以他們沒有出現，看到編輯就明白我在說什麼;） –

只要改變你的按鈕行這樣：

<button onClick="test();return false;">Work</button>

innerHTML的工作正常，但按鈕的默認行爲作出「POST」的要求，使頁面刷新擦除innerHtml更改。返回false語句會禁用此默認行爲，使您的代碼按其應有的工作方式工作。

這是測試和工作。希望它有幫助。

來源

2013-07-20 08:01:47 Jonathan

爲什麼'返回false'？它應該沒有它的工作 – fmodos

+1的解釋 – fmodos

謝謝@fmodos。請記住，我真的遠沒有成爲Web開發專家，所以它可能存在一個更好，更優雅的方式來做到這一點。但是，嘿，它的工作！ ;） – Jonathan

這裏是JSBIN

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <form> 
     <input type="text" id="user1"> 
     <div id="error"></div> 
     <button onClick="test();return false;">Work</button> 
    </form> 
</body> 
</html>

而且在的JavaScript添加其他條件也

if(userdata === ""){ 
    document.getElementById("error").innerHTML="Please fill in Blanks"; 
} else{ 
    document.getElementById("error").innerHTML=""; 
}

來源

2013-07-20 08:08:18

在javascript函數中添加else條件最好，爲什麼因爲輸入空值後點擊工作就可以正常工作，但是輸入數值後又點擊工作然後內部HTML顯示請填空......其錯誤。所以更好地添加其他條件。 –

你可以使用一個簡單的三元運算符來做到這一點，很多代碼保存 –

當我添加一個其他的，它不工作 – Hugo

innerHTML顯示不正確

回答

相關問題