表单中提供文本框、按钮,可以让用户输入1-5个成绩,(个数不确定,可以字符串形式,也可以一个个输入方式)
时间: 2023-06-12 20:06:41 浏览: 45
可以使用文本框和按钮实现此功能。以下是一种可能的实现方法:
1. 在页面上创建一个文本框,用于接收用户输入的成绩。可以使用 HTML 的 `<input>` 标签来创建文本框。
```html
<input type="text" name="score" id="score-input">
```
2. 创建一个按钮,用于将输入的成绩添加到列表中。可以使用 HTML 的 `<button>` 标签来创建按钮。
```html
<button type="button" onclick="addScore()">添加成绩</button>
```
3. 创建一个列表,用于显示用户输入的成绩。可以使用 HTML 的 `<ul>` 和 `<li>` 标签来创建列表。
```html
<ul id="score-list"></ul>
```
4. 创建一个 JavaScript 函数,用于将输入的成绩添加到列表中。可以使用 `document.getElementById` 方法获取文本框和列表的引用,然后使用 `createElement` 和 `appendChild` 方法创建和添加新的列表项。
```javascript
function addScore() {
var scoreInput = document.getElementById("score-input");
var scoreList = document.getElementById("score-list");
var scoreValue = scoreInput.value;
if (scoreValue !== '') {
var scoreItem = document.createElement("li");
scoreItem.textContent = scoreValue;
scoreList.appendChild(scoreItem);
scoreInput.value = '';
}
}
```
5. 可以通过循环获取多个成绩输入,一次添加。
```javascript
function addScores() {
var scoreInput = document.getElementById("score-input");
var scoreList = document.getElementById("score-list");
var scoreValues = scoreInput.value.split(',');
for (var i = 0; i < scoreValues.length; i++) {
var scoreValue = scoreValues[i].trim();
if (scoreValue !== '') {
var scoreItem = document.createElement("li");
scoreItem.textContent = scoreValue;
scoreList.appendChild(scoreItem);
}
}
scoreInput.value = '';
}
```
6. 修改按钮的onclick事件:
```html
<button type="button" onclick="addScores()">添加成绩</button>
```
这样,用户就可以通过文本框输入多个成绩,然后点击按钮将它们添加到列表中。