英文:
how do I enter a string into a field with a button?
问题
I am new here pls correct me if I do something wrong.
我是新手，请纠正我如果我做错了什么。
I couldn't find a solution for this simple issue, yet.
我还找不到这个简单问题的解决方案。
So I am trying to programm a field where I can enter any text and a button to submit it. When I click on the button the text should be displayed in an other div.
所以我试图编写一个字段，我可以在其中输入任何文本，以及一个提交按钮。当我点击按钮时，文本应该显示在另一个 div 中。
That's what I've programmed so far:
这是我目前已经编写的内容：
Field + Button:
字段 + 按钮：
<form>
<div>
<input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
<button onclick="addnewSN('snfield')"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
</div>
</form>
Script:
脚本：
function addnewSN(text) {
document.getElementById('sn').innerHTML += text;
}
Div for displaying the text:
用于显示文本的 div：
<div id="sn"></div>
When I click on the button the site reloads and the div is empty.
当我点击按钮时，网站重新加载，div 是空的。
英文:
I am new here pls correct me if I do something wrong.
I couldn't find a solution for this simple issue, yet.
So I am trying to programm a field where I can enter any text and a button to submit it. When I click on the button the text should be displayed in an other div.
That's what I've programmed so far:
Field + Button:
<form>
<div>
<input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
<button onclick="addnewSN('snfield')"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
</div>
</form>
Script:
function addnewSN(text) {
document.getElementById('sn').innerHTML += text;
}
Div for displaying the text:
<div id="sn"></div>
When I click on the button the site reloads and the div is empty.
答案1
得分: 1
简单的方法是在按钮的onclick代码中返回false，即onclick="addnewSN('snfield'); return false;"。在表单中添加onsubmit="return false;"也可以在这个代码片段中起作用，但不一定总是理想的。
英文:
simplest is to return false from the button onclick code, i.e. onclick="addnewSN('snfield'); return false;"
adding onsubmit="return false;" to the form would also work in this snippet as it stands, but may not always be desirable
答案2
得分: 0
- 移除 onclick 处理程序
- 添加类似以下的处理程序
document.getElementById('target-button').addEventListener('click', function (event) {
event.preventDefault();
// 寻找输入框
// 从中获取值
document.getElementById('sn').innerHTML += 'value';
});
英文:
Or, in other way
- Remove onclick handler
- Add handler like this
document.getElementById('target-button').addEventListener('click', function (event) {
event.preventDefault();
// find input
// get value from it
document.getElementById('sn').innerHTML += 'value';
});
</details>
# 答案3
**得分**: 0
你将输入的id传递给函数，而不是输入文本。首先从输入id获取值，然后将其添加到'sn'中。
```javascript
function addnewSN(id) {
const inputText = document.getElementById(id).value
document.getElementById('sn').innerHTML += inputText;
}
英文:
You are passing input id to the function, not the input text.
First get the value from input id and add it to 'sn'
function addnewSN(id) {
const inputText = document.getElementById(id).value
document.getElementById('sn').innerHTML += inputText;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论