Question

我在点击按钮时尝试添加click事件，页面将显示我在输入字段中输入的内容：

var input = document.querySelector("input").value;
document.querySelector(".myButton").addEventListener("click",function()
{
var container = document.querySelector(".contanier");
   container.innerHTML = input;
});

这只是工作正常，但我希望让这段代码看起来有点像strunctre，所以我重写为：

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代码：

<body>
<div class="main-container">
   <input type="text" class="js-userInput">
   <button class="myButton">Go!</button>
</div>


 <div class="container"></div>    
</body>

Answer 1

如果您在表单中尝试此操作，则按钮应具有属性type="button"。他们的另一种方法 function ($event) { $event.preventDefault();}。例 https://plnkr.co/edit/1F5Z7CZOS4P89nEzU7dP?p=preview

Answer 2

如果您未在<button>标记上指定类型，则defaults to type="submit会导致该按钮所属的表单提交给服务器。

如果未设置指向另一个URL的action，则会导致重新加载同一页面。如果您添加type="button"，它将在不提交页面的情况下用作按钮。正如评论中提到的nnnnnn一样，您只能在页面加载时获得输入框的值一次，因此即使使用type=button，它也无法按预期工作。

当你抓住.value时，你正在抓取一个包含它的值的字符串，而不是对.value属性的引用。而是存储对元素的引用，并在每次运行事件处理程序时抓取.value。

＆＃13;

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
});

＆＃13;

<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>

＆＃13;

操纵eventListener内部或外部的DOM元素

2 个答案: