按鈕點擊檢索值

這是我的代碼，我想要得到myText的值。我嘗試了appendChild但它不起作用。當我點擊按鈕時，如何獲得myText值？按鈕點擊檢索值

<div class="tut"> 
 
    <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;"> 
 
    <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;"> 
 
    <ul id="myList"> 
 
    <li>Coffe</li> 
 
    <li>Tea</li> 
 
    </ul> 
 
    <script type="text/javascript"> 
 
    function myFunc() { 
 
     var = document.getElementById("myText").value; 
 
     document.getElementById("myList").appendChild(); 
 
    } 
 
    </script> 
 
</div>`

來源

2017-04-22 Jack Hawk

在開始的時候，我會建議您鍵入在谷歌查詢。閱讀有關元素，節點對象的文檔。您的參與和Google的幫助可能會解決此類問題。 –

@JackHawk請參閱http://stackoverflow.com/help/someone-answers – guest271314

@投票「關閉」投票的用戶，目前問題如何「離題」爲stackoverflow.com？ – guest271314

應該有以下var的標識符，=之前識別該變量。

使用document.createElement()創建<li>元素，將.textContent設置爲來自上一行的變量標識符。

通過創建li元素到.appendChild()。

favorite 
 
<div class="tut"> 
 
    <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;"> 
 
    <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;"> 
 
    <ul id="myList"> 
 
    <li>Coffe</li> 
 
    <li>Tea</li> 
 
    </ul> 
 
    <script type="text/javascript"> 
 
    function myFunc() { 
 
     var text = document.getElementById("myText").value; 
 
     var li = document.createElement("li"); 
 
     li.textContent = text; 
 
     document.getElementById("myList").appendChild(li); 
 
    } 
 
    </script> 
 
</div>`

來源

2017-04-22 15:20:46 guest271314

非常感謝。 –

對於純文本節點，你可以創建一個與document.createTextNode(text)並直接使用它。不過，您仍然需要一個列表元素的節點，然後您可以將它添加到無序列表節點。

function myFunc() { 
 
    var text = document.getElementById("myText").value, 
 
     li = document.createElement('li'); 
 
     
 
    li.appendChild(document.createTextNode(text)); 
 
    document.getElementById("myList").appendChild(li); 
 
}

<div class="tut"> 
 
    <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;"> 
 
    <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;"> 
 
    <ul id="myList"> 
 
    <li>Coffe</li> 
 
    <li>Tea</li> 
 
    </ul> 
 
</div>

來源

2017-04-22 15:25:50

想知道是否li.appendChild（document.createTextNode（text））;比li.textContent = text;創建li元素之後？後者會不會更有效率？ –

我正在使用更多以節點爲中心的視圖到DOM，實際上我還沒有測試，哪個工作更快。 –

您需要輸入的值存儲到一個變量。

然後，您需要創建一個新的List Item DOM節點，您可以從該變量中設置值。

最後，您需要將新創建的列表項Node添加到您的列表Node中。

<div class="tut"> 
 
    <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;"> 
 
    <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;"> 
 
    <ul id="myList"> 
 
     <li>Coffe</li> 
 
     <li>Tea</li> 
 
    </ul> 
 
    <script type="text/javascript"> 
 
     function myFunc() { 
 
     var value = document.getElementById("myText").value; 
 
     var newItem = document.createElement('li'); 
 
     newItem.appendChild(document.createTextNode(value)); 
 
     
 
     var list = document.getElementById("myList"); 
 
     list.appendChild(newItem); 
 
     } 
 
    </script> 
 
</div>`

來源

2017-04-22 15:25:56

嘗試更新功能，以這樣的：

function myFunc() { 
    var myText= document.getElementById("myText").value; 
    document.getElementById("myList").innerHTML+="<li>"+myText+"</li>"; 
}

來源

2017-04-22 16:45:24

按鈕點擊檢索值

回答

相關問題