英文:
I need to display input items in an array inside paragraph but items disappear after submission and display
问题
以下是翻译好的部分：
"目标是将项目添加到输入框中，并在下面的段落中显示它们。
但在项目显示后，页面会消失。
我需要页面保持原样，不要消失。
下面我包含了在同一HTML文件中的CSS和JavaScript，因为这样更容易复制粘贴。"
请注意，代码部分已被排除在外，只翻译了文本内容。
英文:
The goal is to add items into the input box and display them in the paragraph below it.
But page disappears after the items are displayed.
I need the page to stay the way it is and not disappear.
Bellow I included the css and the javascript inside the same HTML file because it is easier to copy-paste
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
}
</style>
</head>
<body>
<h1>Show Room</h1>
<form onsubmit="memory()">
<p>Add items to display bellow</p>
<textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
<input type="submit" value="Submit">
</form>
<h3>Display</h3>
<p id="sentence"></p>
<script>
var items = [];
function memory() {
boxvalue = document.getElementById('box').value;
items.push(boxvalue);
document.getElementById("sentence").innerHTML = items;
return false;
}
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 2
如果您希望使用memory的返回值来阻止表单提交，您需要在onsubmit属性中明确返回它。
onsubmit="return memory()"
然而，最好使用addEventListener和event.preventDefault()，而不是内联事件处理程序。
您可以这样实现：
// 首先移除表单上的onsubmit属性
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
memory();
});
英文:
If you want to use the return value from memory to stop the form from submitting, you need to explicitly return it in the onsubmit attribute.
onsubmit="return memory()"
However, it is better to use addEventListener and event.preventDefault() instead rather than inline event handlers.
You can implement this like so:
// remove the onsubmit attribute on the form first
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
memory();
});
答案2
得分: 1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
}
</style>
</head>
<body>
<h1>Show Room</h1>
<form onsubmit="memory()">
<p>Add items to display bellow</p>
<textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
<input type="submit" value="Submit">
</form>
<h3>Display</h3>
<p id="sentence"></p>
<script>
var items = [];
function memory() {
event.preventDefault();
boxvalue = document.getElementById('box').value;
items.push(boxvalue);
document.getElementById("sentence").innerHTML = items.toString();
}
</script>
</body>
</html>
英文:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
}
</style>
</head>
<body>
<h1>Show Room</h1>
<form onsubmit="memory()">
<p>Add items to display bellow</p>
<textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
<input type="submit" value="Submit">
</form>
<h3>Display</h3>
<p id="sentence"></p>
<script>
var items = [];
function memory() {
event.preventDefault();
boxvalue = document.getElementById('box').value;
items.push(boxvalue);
document.getElementById("sentence").innerHTML = items.toString();
}
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论