Is it possible for a button to add a tag to a textarea without erasing the content?

Question

Is it possible for a button to add a tag to a textarea without erasing the content?

Navigation

#1 by (2 votes)

1

The HTML and JS code is as follows:

            window.onbeforeunload = confirmExit;
            function confirmExit(){
                return "Ha intentado salir de esta pagina. Si ha realizado algun cambio en los campos sin hacer clic en el boton Guardar, los cambios se perderan. Seguro que desea salir de esta pagina? ";
            }

            var table_inputs = 0;
            function addTextarea(id, name) {
                var table     = document.getElementById(id);
                var row       = table.insertRow(2);
                var cell      = row.insertCell(0);
                var input     = document.createElement("textarea");
                table_inputs++;
                input.rows    = "4";
                input.cols    = "170";
                input.name    = name + table_inputs;
                input.id      = id + table_inputs;
                var campo     = document.createElement("input");
                campo.type    = "button";
                campo.value   = "Borrar";
                campo.onclick = function () {
                    var fila  = this.parentNode.parentNode;
                    var tbody = table.getElementsByTagName("tbody")[0];
                    tbody.removeChild(fila);
                }
                cell.appendChild(input);
                cell.appendChild(campo);
            }

            function vaciar_campo(input1) {
                input1.value = "";
            }

            var textArea = document.getElementById('tesis');

            function addTag(){
            var current_value = textArea.value;
            var new_tag = "<a href='aqui introduzca el link'>Aqui la palabra a móstrar</a>";
            textArea.value = current_value + ' ' + new_tag;
            }

<form name="formulario" id="formulario" action="creador.php" method="post" width="30%">
<table id="tesisTable" border="3" width="100%">
                <tr>
                    <td><h1>TESIS DOCTORAL</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea name="tesis" id="tesis" rows="4" cols="170"></textarea>
                        <button onclick="addTextarea('tesisTable', 'tsis')" type="button" name="tesis2" id="tesis2">Añadir</button>
                        <button onclick="addTag()" type="button" name="tesis3" id="tesis3">Add tag</button>
                    </td>
                </tr>
            </table>
</form>

The Snippet works for me but when I try it on my page, this error appears:

Uncaught TypeError: Cannot read property 'value' of null
 at addTag (VM94 datos.html:41)
 at HTMLButtonElement.onclick (datos.html:71)

javascript html formularios

asked by Oscar Sanclemente 27.03.2017 в 09:33

source

1 answer

How to concatenate a MySQL query with html tags to send color to text textView on Android? Replace text except in divs of a class with regular expression

score 2 · Accepted Answer

You are not taking the reference in the variable textArea .

Instead of:

 var textArea = document.getElementById('tesis');
 function addTag() {
     var current_value = textArea.value;
     var new_tag = "<a href='aqui introduzca el link'>Aqui la palabra a móstrar</a>";
     textArea.value = current_value + ' ' + new_tag;
 }

Put the initialization inside:

function addTag() {
    var textArea = document.getElementById('tesis');
    var current_value = textArea.value;
    var new_tag = "<a href='aqui introduzca el link'>Aqui la palabra a móstrar</a>";
    textArea.value = current_value + ' ' + new_tag;
}