Web Text Editor - Tying Radio Button to Javascript Function?

Question

I've written the following HTML page to serve as a simple text editor.

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

I'm trying to make it so that the "add node" button populates the "mod_area" div with the text in the text area. I thought setting the "onclick" method of the radio button to the Javascript would suffice, a 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;
    }

but so far clicking the button does nothing. Since my text area is in a form, should I instead be checking the status of the radio button/calling the function from the submit's onclick?

Did you try using single quotes like `addNode('mod_area')` and what is var `e` in your function? — Batu.Khan, Feb 14 '16 at 15:43
@ Rome_Leader ....Also your mark-up for radio options have different name. So that is acting like check box[ i mean we can choose more that one option at a time] — Nofi, Feb 14 '16 at 15:51
@Ryan.Hunt I think the 'e' means 'txt_src' he must have mistyped it — Shrikantha Budya, Feb 14 '16 at 16:17

score 0 · Answer 1 · edited Feb 14 '16 at 16:01

0

Your code produces an error:

ReferenceError: e is not defined at addNode

edited Feb 14 '16 at 16:01

John Slegers

45,213
22
199
169

answered Feb 14 '16 at 15:57

Yauheni Pakala

868
9
16

Sorry, that was a typo on my behalf. txt_src is indeed what is/should be – Rome_Leader Feb 14 '16 at 18:45

score 0 · Accepted Answer · edited May 23 '17 at 11:50

This answer incorporates corrections suggested in comments, i.e., using single quotes, defining "e", etc. All credit to commenters since they already provided a solution.

In addition, OP might consider using a textarea, rather than a div, to store the result. The problem with using a div is that it would require html entity escaping and special formatting.

A working example is shown below. Run the snippet to try.

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>

Web Text Editor - Tying Radio Button to Javascript Function?

2 Answers2