有時候明明是些很簡單的東西,因為自己的一些大意,可能就在那圈子里一直兜兜轉轉,好久都繞不出來。
所以我也願意把這些很簡單的愚蠢寫出來,與君共享~
首先大家知道<input>有一個名叫“button”的type,它的可見與否由“disabled”屬性決定。
下面的代碼,我的原意是一個輸入框和三個按鈕。在點擊“編輯”按鈕前,另外三個都屬於“不可用”狀態,點擊以后方能恢復可用。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function edit(){ document.getElementById("editCode").disabled = true; document.getElementById("inviteCode").disabled = false; document.getElementById("randomCode").disabled = false; document.getElementById("submitCode").disabled = false; } </script> </head> <body> <h3>邀請碼設置</h3> <s:form> <table cellspacing="10"> <tr> <th>當前邀請碼:</th> <td><input type="text" name="inviteCode" id="inviteCode" value="" class="input" size="6" disabled/></td> <td><input type="button" name="randomCode" id="randomCode" value="隨機獲取" disabled/></td> </tr> <tr align="right"> <td><input type="button" name="editCode" id="editCode" value="編輯" onclick="edit()"/></td> <td><input type="submit" name="submitCode" id="submitCode" value="確定" disabled/></td> </tr> </table> </s:form> </body> </html>
很簡單,就是在edit()函數里將各個元素的disabled類型設置為可用或者不可用。
中間我遇到了個很大的問題導致我一直以為自己找的解決方法不可用,那就是我將元素命名為“edit”、“submit”等等,可能與本身一些內容發生了沖突。審查元素后報錯:object is not a function.
改名后一切得到解決。