在eventListener內部或外部操作DOM元素
[英]manipulating DOM elements inside or outside the eventListener
問題描述
當我單擊按鈕時，我試圖添加一個click事件，該頁面將顯示我在輸入字段中鍵入的內容：
var input = document.querySelector("input").value;
document.querySelector(".myButton").addEventListener("click",function()
{
var container = document.querySelector(".contanier");
container.innerHTML = input;
});
這很好，但是我想使這段代碼看起來有點斷斷續續，所以我重提一下：
var input = document.querySelector("input").value;
var button = document.querySelector(".myButton");
var container = document.querySelector(".contanier");
button.addEventListener("click",function(){container.innerHTML = input;});
但是，當我單擊按鈕時，頁面將刷新為空白，我是否必須在event內添加DOM才能正常工作？ 重寫后，有誰能告訴我有什么區別？
對不起，我為HTML代碼添加了Foxort：
<body>
<div class="main-container">
<input type="text" class="js-userInput">
<button class="myButton">Go!</button>
</div>
<div class="container"></div>
</body>
2 個解決方案
解決方案1
1 2017-06-06 04:16:25
如果您嘗試將其放入表單，那么button應該具有type="button"屬性。 它們是function ($event) { $event.preventDefault();}另一種方法。 示例https://plnkr.co/edit/1F5Z7CZOS4P89nEzU7dP?p=preview
解決方案2
1 已采納 2017-06-06 04:50:40
如果未在<button>標記上指定類型，則默認為type="submit ，這將導致按鈕所屬的表單提交到服務器。
如果未設置指向另一個URL的action則會導致重新加載同一頁面。 如果添加type="button" ，它將用作按鈕而無需提交頁面。 正如nnnnnn在注釋中指出的那樣，在頁面加載時，您也只能獲得一次輸入框的值，因此即使使用type=button也無法按預期工作。
當您獲取.value ，將獲取包含其值的字符串，而不是對.value屬性的引用。 而是存儲對元素的引用，並在每次事件處理程序運行時獲取.value 。
var input = document.querySelector("input"), // store a reference to the element, // instead of querying the .value button = document.querySelector(".myButton"), container = document.querySelector(".container"); // there was a typo in the // class name here too, so // the container variable was null. button.addEventListener("click", function() { container.innerHTML = input.value; // query the .value here each time it runs });
<div class="main-container"> <input type="text" class="js-userInput"> <!-- you need to specify type button so it doesn't default to submit, which will reload the page. --> <button type="button" class="myButton">Go!</button> </div> <div class="container"></div>
第一次單擊在 javascript 中無法用於操作 DOM 元素
[英]First click is not working in javascript for manipulating DOM elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.