Web 文本编辑器 - 将单选按钮绑定到 javascript 函数

Web Text Editor - Tying Radio Button to Javascript Function?

本文关键字：绑定 javascript 函数 单选按钮 文本 文本编辑 编辑器 Web      更新时间：2023-09-26

我编写了以下HTML页面作为简单的文本编辑器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Text Editor</title>
</head>
<body>
<form name="editor_zone" action="" method="POST">
<textarea cols="50" rows="10" name="text_space">
    Enter your text here.
</textarea> <br>
<input type="radio" name="add_node">Add Node
<input type="radio" name="delete_node">Delete Node
<input type="radio" name="insert_after"> Insert after node
<input type="radio" name="replace"> Replace node
<br>
<div> Paragraph #:
<select>
 <option value="1">1</option>
</select>
<input type="submit" onclick="">
</div>
</form>
<div id="mod_area">

</div>
</body>
</html>

我正在尝试使"添加节点"按钮使用文本区域中的文本填充"mod_area"div。我认为将单选按钮的"onclick"方法设置为 Javascript 就足够了，啦：

<input type="radio" name="add_node" onclick="addNode("mod_area")">Add Node
--etc.
function addNode(id) {
        var txt_src = document.getElementById( id );
        var txt = "<p>";
        txt += txt_src.value;
        txt += "</p>";
        e.innerHTML = e.innerHTML + txt;
    }

但到目前为止，单击该按钮没有任何作用。由于我的文本区域在表单中，我是否应该检查单选按钮的状态/从提交的 onclick 调用函数？

这个答案包含了评论中建议的更正，即使用单引号，定义"e"等。所有功劳都归功于评论者，因为他们已经提供了解决方案。

此外，OP 可能会考虑使用文本区域而不是div 来存储结果。使用div 的问题在于它需要 html 实体转义和特殊格式。

下面显示了一个工作示例。运行代码段进行尝试。 

function addNode() {
  var e = document.forms[0].text_space;
  document.getElementById('mod_area').value += e.value + ''n';
  e.value = '';
};
textarea {
  width: 50em;
  height: 10em;
  border: 1px gray solid;
  padding: 0.25em;
  display: block;
}
#mod_area {
  background-color: white;
  color: black;
}
<form>
  input:
  <textarea name="text_space">Add some text and click Add Node</textarea>
  <input type="radio" name="radio1" value="add_node" onclick="addNode()">Add Node
  <input type="radio" name="radio1" value="delete_node">Delete Node
  <input type="radio" name="radio1" value="insert_after">Insert after node
  <input type="radio" name="radio1" value="replace">Replace node
  <input type="submit" disabled>
</form>
output:
<textarea id="mod_area" disabled></textarea>

您的代码会产生错误：

引用错误：e 未在 addNode 定义

相关文章：