我的HTML：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Competition</title><link href="css/style.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Pacifico&display=swap" rel="stylesheet"> </head><body> <div class="wrapper"> <header> <h1>Football</h1> <p>A Fottball Competition App</p> <form id="registrar"> <input type="text" id="txtVal" name="name" placeholder="Invite Team"> <button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button> </form> </header> <div class="main"> <h2>Invitees</h2> <ul id="invitedList"> </ul> </div> </div> <script type="text/javascript" src="javascript/app.js"></script></body></html>我必须添加 JavaScript，这样当您在输入字段中输入字符串并单击“提交”时，它就会<li>向<ul>.我尝试使用以下脚本：function addLi() { var txtVal = document.getElementById('txtVal').value, listNode = document.getElementById('invitedList'), liNode = document.createElement("LI"), txtNode = document.createTextNode(txtVal); liNode.appendChild(txtNode); listNode.appendChild(liNode); }但由于该按钮具有submit重新加载页面的类型并且<li>消失。有没有办法在不编辑 HTML 的情况下做到这一点？
2 回答
德玛西亚99
TA贡献1770条经验 获得超3个赞
你说你不能修改你的 HTML，所以这是我找到的解决方案。
您想要阻止表单提交。您可以通过以下方式做到这一点：
const myForm = document.querySelector('#registrar');
myForm.addEventListener("submit", function(evt) {
evt.preventDefault();
});
请参阅工作片段：
function addLi() {
var txtVal = document.getElementById('txtVal').value,
listNode = document.getElementById('invitedList'),
liNode = document.createElement("LI"),
txtNode = document.createTextNode(txtVal);
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
}
const myForm = document.querySelector('#registrar');
myForm.addEventListener("submit", function(evt) {
evt.preventDefault();
});
<div class="wrapper">
<div>
<h1>Football</h1>
<p>A Fottball Competition App</p>
<form id="registrar">
<input type="text" id="txtVal" name="name" placeholder="Invite Team">
<button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button>
</form>
</div>
<div class="main">
<h2>Invitees</h2>
<ul id="invitedList">
</ul>
</div>
</div>
慕哥9229398
TA贡献1877条经验 获得超6个赞
您只需要更改html中的提交按钮并为提交事件监听器添加preventDefault
超文本标记语言
/* Replace the button to input as below */
<input type="submit" value="Submit">
JS
/* Adding eventlistener for the form submit */
const form = document.getElementById('registrar');
form.addEventListener('submit', addLi);
function addLi(e) {
/* Prevent the default functionality - in this case it is, reloading page */
e.preventDefault();
/*
...the rest of the function code
*/
}
如果有任何不清楚的地方，请随时询问。
- 2 回答
- 0 关注
- 82 浏览
添加回答
举报
0/150
提交
取消