純Java腳本將文本插入 <input type=“text”> 沒有屬性

Question

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

要選擇我使用的輸入元素：

inputelement = document.getElementsByClassName('uiInlineBlock uiMenuHolder')[0].children[0].children[0];

問題是我試圖將文本放入文本區域內，但是通過使用值我設置了值，但文本字段仍然為空。 如何使用純JavaScript修復此問題？

Answer 1

您可以使用querySelectorAll和級聯選擇器選擇第一個div，因此選擇第二個，最后選擇輸入，而不是從外部div開始逐步選擇：

• div.uiInlineBlock.uiMenuHolder選擇第一個div
• div選擇子div
• input [type = text]選擇子輸入文本字段

因此，完整字符串'div.uiInlineBlock.uiMenuHolder div input [type = text]'將選擇div中包含的div中具有以下兩個類的所有輸入文本字段：uiInlineBlock uiMenuHolder。

因為querySelectorAll將返回一個列表，並且由於您只有一個輸入，所以您需要采用結果的第一個元素。

 window.onload=function() { var inputEle = document.querySelectorAll('div.uiInlineBlock.uiMenuHolder div input[type=text]'); inputEle[0].value = 'your value'; } 

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

Answer 2

 inputelement = document.getElementsByClassName('uiInlineBlock uiMenuHolder')[0].children[0].children[0] inputelement.value = 'your value'; 

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

Answer 3

更安全

inputelement = document.querySelector('.uiInlineBlock.iMenuHolder input');

inputelement.value = 'your value';