[英]Why do my HTML buttons refresh the page?/Why can't I get my new HTML DOM Element to insert into my page
This should be really simple, but for some reason I just can't seem to get it to work. 这应该真的很简单,但是由于某种原因,我似乎无法使其正常工作。 I'm very new to JS, and I've mostly been using W3 schools to learn (although I've since discovered to MDN ( Mozilla Developer Network ), which has proven very useful.
我是JS的新手,我主要是使用W3学校来学习(尽管此后我发现了MDN( Mozilla开发人员网络 ),这被证明非常有用。
I'm trying to create a new div, append several children to it, and then insert the new div into an HTML form. 我正在尝试创建一个新的div,向其添加几个孩子,然后将新的div插入HTML表单中。
Currently I was just trying to run a few test cases make sure that I can get the basic JS working. 目前,我只是在尝试运行一些测试用例,以确保我可以使用基本的JS。 And I don't know what I'm doing wrong.
而且我不知道我在做什么错。 Does anyone know where I'm messing up here?
有人知道我在这里搞砸吗?
function AddQueryBox(){ window.alert("Add QueryBox"); var NewQBox = document.createElement('div'); document.createElement('div'); NewQBox.appendChild(document.createTextNode("Testing")); document.getElementById("1").appendChild(NewQBox); //document.body.appendChild(NewQBox); }
<div align="right" id="1"> <select onchange="SwitchDatabaseSet()" name="DBSetList" form="DBSetSelector" id="DBSetSelector"> <option value="' . $DBSet->DBSetName . '">OPTION</option> <option value="' . $DBSet->DBSetName . '">Option</option> </select> </div> <Form> <div> <div class="QueryBox" name="QBox"> <select> <option>Option</option> </select> <input type="text"></input> <button>-</button> </div> <div><button onclick="AddQueryBox()">+</button></div> </div> </Form>
DERAIL: This question took a really strange turn... my code works perfectly on stack overflow...but not in XAMPP (dev environment)... Anyone have any ideas about potential causes? DERAIL:这个问题发生了一个非常奇怪的转折……我的代码在堆栈溢出时完美地工作了……但是在XAMPP(开发环境)中却没有……任何人都对潜在原因有任何想法?
EDIT: Apparently the code is working on my end. 编辑:显然,代码在我这端工作。 But my browser refreshes immediately after the element is added--and removes the element.
但是添加元素后,我的浏览器会立即刷新-并删除该元素。 Because my refresh rate was too fast I didn't see the change.
因为刷新速度太快,所以我看不到变化。 Anybody know why + would make the browser refresh?
有人知道为什么+会使浏览器刷新吗?
Your page is reloading because the button is submitting your form. 您的页面正在重新加载,因为该按钮正在提交您的表单。
The submit will, by default, re-load the page to show form errors or the result of the submit action. 默认情况下,提交将重新加载页面以显示表单错误或提交操作的结果。 The cleanest fix is, as you discovered, to specify a button type.
如您所见,最干净的解决方法是指定按钮类型。
<button type="button">
instead of your 而不是你的
<button type="submit">
The HTML page was refreshing immediately after hitting the button. 按下按钮后,HTML页面立即刷新。 Because my network and load times were fast I didn't notice that anything was happening.
因为我的网络和加载时间都很快,所以我没有发现任何事情发生。
The code actually works just fine in XAMPP, it was just doing the following: 该代码实际上在XAMPP中可以正常工作,它只是在执行以下操作:
Load Page->User Clicks Button->Insert DIV->Immediate Refresh (Refreshes too quickly to see "Insert DIV" happening) 加载页面->用户点击按钮->插入DIV->立即刷新(刷新太快,以至于无法看到“插入DIV”的发生)
The reason for this I found is that, if you don't include a "type" attribute on an HTML button, it will refresh the page. 我发现此问题的原因是,如果您在HTML按钮上不包含“ type”属性,它将刷新页面。 Thus the solution was to include 'type="button"' as an attribute to the HTML button tag like so:
因此,解决方案是将“ type =“ button””作为HTML按钮标签的属性包括在内,如下所示:
<div><button type="button" onclick="AddQueryBox()">+</button></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.