我正在开发一个带脚本的简单网页。您可以在表单中输入名称，然后提交表单。提交后，脚本应读取值，将名称推送到数组，然后将字符串添加到其下方的HTML段落中。每次提交新名称时，数组和显示的段落都会变长。但是，当我按下提交时，在页面重置为启动设置之前，新名称会在HTML段落上闪烁一小段时间。这里的代码出了什么问题？
<body>
<div id="infoDiv">
<form href="JavaScript:void(0)" onSubmit="appendName();">
<fieldset>
<legend>Enter names (no duplicates):</legend>
<input type="text" id="guestName"><br>
<input type="submit" value="Add name to guestlist"><br><br>
</fieldset>
</form>
<p id="guest_roster">Current list:<br>Empty</p>
<script>
var guestNames = [];
var guestList = "Current list:<br>";
function appendName() {
var latestGuest = document.getElementById("guestName").value;
guestNames = guestNames.push(latestGuest);
guestList = guestList + latestGuest + "<br>";
document.getElementById("guest_roster").innerHTML = guestList;
}
</script>
</body>您只需要将event.preventDefault();添加到onSubmit函数中。
此外，当您推动阵列时，只需使用guestNames.push(latestGuest);，无需使用guestNames = guestNames.push(latestGuest);
工作片段：
<body>
<div id="infoDiv">
<form href="JavaScript:void(0)" onSubmit="appendName(event);">
<fieldset>
<legend>Enter names (no duplicates):</legend>
<input type="text" id="guestName"><br>
<input type="submit" value="Add name to guestlist"><br><br>
</fieldset>
</form>
<p id="guest_roster">Current list:<br>Empty</p>
<script>
var guestNames = [];
var guestList = "Current list:<br>";
function appendName() {
event.preventDefault();
var latestGuest = document.getElementById("guestName").value;
guestNames.push(latestGuest);
guestList = guestList + latestGuest + "<br>";
document.getElementById("guest_roster").innerHTML = guestList;
}
</script>
</body>正如@ cb64所说，你必须通过event并致电event.preventDefault()。这里有一些建议。
let/const来使用var来全局声明你的变量''，单击该按钮后删除该字段。Array.push()，只需调用push，它是一个变异操作，您的数组将被更新。<br>加入数组。Empty将你的<span>包裹在你的HTML中并设置这个元素的innnerHTML而不是设置整个段落，这样你就不必重写Current list:了。<body>
<div id="infoDiv">
<form href="JavaScript:void(0)" onSubmit="appendName(event);">
<fieldset>
<legend>Enter names (no duplicates):</legend>
<input type="text" id="guestName"><br>
<input type="submit" value="Add name to guestlist"><br><br>
</fieldset>
</form>
<p>Current list:<br><span id="guest_roster">Empty</span></p>
<script>
const guestNames = [];
function appendName(event) {
event.preventDefault();
const guestName = document.getElementById('guestName');
const latestGuest = guestName.value;
guestName.value = '';
guestNames.push(latestGuest);
document.getElementById('guest_roster').innerHTML = guestNames.join('<br>');
}
</script>
</body>