在eventListener内部或外部操作DOM元素

Question

当我单击按钮时，我试图添加一个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>

Answer 1

如果您尝试将其放入表单，那么button应该具有type="button"属性。 它们是function ($event) { $event.preventDefault();}另一种方法。 示例https://plnkr.co/edit/1F5Z7CZOS4P89nEzU7dP?p=preview

Answer 2

如果未在<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>

在eventListener内部或外部操作DOM元素

问题描述

2 个解决方案

解决方案1
1 2017-06-06 04:16:25

解决方案2
1 已采纳 2017-06-06 04:50:40

在eventListener内部或外部操作DOM元素

问题描述

2 个解决方案

解决方案1 1 2017-06-06 04:16:25

解决方案2 1 已采纳 2017-06-06 04:50:40

解决方案1
1 2017-06-06 04:16:25

解决方案2
1 已采纳 2017-06-06 04:50:40