Question

我已编写以下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>

我试图让它成为＆＃34;添加节点＆＃34;按钮填充＆＃34; mod_area＆＃34; div与文本区域中的文本。我想设置＆＃34; onclick＆＃34; la的单选按钮的方法就足够了，la：

<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调用该功能？

Answer 1

您的代码会产生错误：

ReferenceError：e未在addNode
中定义

Answer 2

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

此外，OP可能会考虑使用textarea而不是div来存储结果。使用div的问题是需要html entity escaping和特殊格式。

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

＆＃13;

function addNode() {
  var e = document.forms[0].text_space;
  document.getElementById('mod_area').value += e.value + '\n';
  e.value = '';
};

＆＃13;

textarea {
  width: 50em;
  height: 10em;
  border: 1px gray solid;
  padding: 0.25em;
  display: block;
}
#mod_area {
  background-color: white;
  color: black;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: