JavaScript编写一个函数,向网页添加另外 2 个从属单选按钮(偶数/奇数)。 通过单击按钮,您需要删除textarea中的偶数行或奇数行,具体取决于用户的选择。应用于html
时间: 2023-06-09 19:04:59 浏览: 80
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Remove Even/Odd Lines</title>
<script>
function addButtons() {
var evenBtn = document.createElement("input");
evenBtn.setAttribute("type", "radio");
evenBtn.setAttribute("name", "filter");
evenBtn.setAttribute("value", "even");
evenBtn.setAttribute("onclick", "filterLines()");
var oddBtn = document.createElement("input");
oddBtn.setAttribute("type", "radio");
oddBtn.setAttribute("name", "filter");
oddBtn.setAttribute("value", "odd");
oddBtn.setAttribute("onclick", "filterLines()");
var evenLabel = document.createElement("label");
evenLabel.innerHTML = "Even Lines";
evenLabel.setAttribute("for", "even");
var oddLabel = document.createElement("label");
oddLabel.innerHTML = "Odd Lines";
oddLabel.setAttribute("for", "odd");
document.getElementById("filter").appendChild(evenBtn);
document.getElementById("filter").appendChild(evenLabel);
document.getElementById("filter").appendChild(oddBtn);
document.getElementById("filter").appendChild(oddLabel);
}
function filterLines() {
var filter = document.querySelector('input[name="filter"]:checked').value;
var textarea = document.getElementById("textarea");
var lines = textarea.value.split('\n');
var newLines = [];
for (var i = 0; i < lines.length; i++) {
if ((i % 2 === 0 && filter === "odd") || (i % 2 !== 0 && filter === "even")) {
newLines.push(lines[i]);
}
}
textarea.value = newLines.join('\n');
}
</script>
</head>
<body onload="addButtons()">
<label for="textarea">Enter Text:</label><br>
<textarea id="textarea" rows="10" cols="50"></textarea>
<div id="filter"></div>
</body>
</html>
```
这个代码会向网页添加两个单选按钮,用户可以选择删除textarea中的偶数行或奇数行。单击按钮时,它会调用`filterLines()`函数,该函数会根据用户选择删除相应的行。
阅读全文