[SOLUCIONADO] ¿Como agregar texto a textarea con botón en JavaScript?

[MeDxEc]

Estoy construyendo un cms y me gustaría que al pulsar un botón (maquetado con HTML y CSS) se me imprimiera en un textarea cierto texto. Sería algo, hablando vagamente, así:

<button class="..." id="id">Agregar imágen</button>

y que el JS sea algo como

boton.OnClick -> <textarea>'<img src="" alt="">'</textarea>

¿Me hago entender? Me gustaría que el código quedara al final y no sustituyera todo lo que ya hay en el textarea como presiento que pasaría. Muchas gracias :)

[PHPeros]

¿Una imagen en un textarea?

Pues primero le añades a éste un ID, lo obtienes con document.getElementById("id") y con la propiedad innerHTML con el operador += añades dicho texto. Hay más formas pero son un poco más avanzadas.

[MeDxEc]

Sí, el código se escribirá en el textarea para luego ser guardada en la base de datos y posteriormente llamada mediante PHP. ¿Ves?

¿Como hago para que un botón ejecute dicho script? Soy muy novato en cuanto a JavaScript se refiere. Me imagino que debo crear una función y en el botón colocarle Onclick="funcion()", ¿no?
MUchas gracias.

[PHPeros]

Correcto, eso es lo más sencillo. Puedes ayudarte con manuales. (Busca en google)

[MeDxEc]

Me sirvió perfectamente, el problema es que solo deja imprimir el código una vez. No pude hacerlo con buttons así que lo hice con <a> y funcionó pero ¿hay una forma de que se pueda hacer varias veces? Además, si ya hay algo escrito en el textarea no funciona el botón ¿alguna idea?

[PHPeros]

Pon el código que tienes hasta ahora

[MeDxEc]

También lo he probado con <a href="javascript:add_img()">Añadir imágen</a> pero solo sirve una vez y yo necesito que sirva varias veces. Aquí mi codigo por si las moscas :) ...

Código Javascript:

<script>
 
            function add_img(){
            
                document.getElementById("noticia").innerHTML = '<img src="COLOCA AQUÍ LA DIRECCIÓN DE LA IMAGEN" alt="COLOCA TEXTO ALTERNATIVO" class="img-responsive imageborder"'
            }
 
        </script>
 

y el <a> es:

Código HTML:

<a href="javascript:add_img()" id="add_img" class="btn btn-success">Agregar imagen</a>
 

Si lo hago con buttons no sirve porque ejecuta el formulario. ¡911! :(

[PHPeros]

Código Javascript:

<script>
 
            function add_img(){
            
                document.getElementById("noticia").innerHTML += '<img src="COLOCA AQUÍ LA DIRECCIÓN DE LA IMAGEN" alt="COLOCA TEXTO ALTERNATIVO" class="img-responsive imageborder"'
            }
 
        </script>
 

Recalco lo del operador +=

Código HTML:

<button onclick="add_img()" id="add_img" class="btn btn-success">Agregar imagen</button>
 

[MeDxEc]

¡Funcionó a la perfección!... Bueno, casi...

Cuando escribo algo y luego pulso el botón no funciona, aunque sin haber escrito nada puedo pulsarlo cuantas veces quiera y funciona... ¿Alguna idea?

[PHPeros]

Pero, ¿Qué se supone que tienes que escribir? ¿El código de la imagen? ¿La dirección? ¿El atributo alt?

[MeDxEc]

Sí jajaja. O sea, el botón imprime '<img src="COLOCA AQUÍ LA DIRECCIÓN DE LA IMAGEN" alt="COLOCA TEXTO ALTERNATIVO" class="img-responsive imageborder" ' pero una vez que escribo allí los botones quedan inutilizables :l

[MeDxEc]

Y si lo hago con

Código HTML:

<button onclick="add_img()" id="add_img" class="btn btn-success">Agregar imagen</button>
 

se ejecuta mi formulario, así que no me sirve de este modo.

[PHPeros]

No, con button es imposible que se envié el formulario... Te pasan unas cosas muy raras... tengo miedo

[MeDxEc]

Lo juro, el formulario se ejecuta si lo pongo con button y obviamente el formulario no imprime.

Checa aquí, te subo mi página de ejemplo. http://201.185.242.30/proyectos/soyt...mplo-error.php

[jonni09lo]

Iniciado por PHPeros

No, con button es imposible que se envié el formulario... [...]

Dale clic al botón

PD: Mejor que use listeners y que use event.preventDefault();

Saludos

[MeDxEc]

Disculpa mi ignorancia pero ¿qué son listeners y ese evento? Jajaja es que la última vez que recuerdo haber tocado JavaScript fue hace muchos años para hacer nevar mi página web xD

[jonni09lo]

Si buscas en Google encontrarás mucha información en pocas palabras los listeners registran un evento a un objetivo en especifico.

Mira este ejemplo basado en lo que te decía de los listeners

Saludos

[PHPeros]

Nah, esque los resultados varían dependiendo del navegador y como yo uso IE 2

[MeDxEc]

Los listeners y el evento son jquery ¿no?

No sé si quiera complicarme tanto con esto, debería de haber alguna forma de hacerlo con JS purito ¿no? :D

[PHPeros]

A ver, crea un dichoso botón normal:

<input type="button">

Los listeners son JavaScript puro y duro. Ya de paso podíamos haber empezado con js orientado a objetos

[MeDxEc]

Lo hice así

Código HTML:

<input type="button" onclick="add_img()" id="add_img" class="btn btn-success" value="Agregar imagen">
 

Y no funcionó... Ayuda que este problema y el problema de impresión de PHP me tienen la cabeza grande :(

[MeDxEc]

Iniciado por jonni09lo

Si buscas en Google encontrarás mucha información en pocas palabras los listeners registran un evento a un objetivo en especifico.

Mira este ejemplo basado en lo que te decía de los listeners

Saludos

¿Me podrías ayudar un poco con lo de los listeners y eso? Es que como comentaba, logré hacerlo funcionar pero no funciona del todo bien...

[MeDxEc]

¡Al fin lo he solucionado! Opté por no usar innerHTML y use .value Para quien le sirva...

Código HTML:

<a href="javascript:nombrefuncion()" id="id" class="btn btn-info">Texto</a>
 

Código Javascript:

<script>
            function nombrefuncion(){
            
              document.getElementById ("id").value += 'EL TEXTO QUE SEA.'
            }
 
</script>
 

Muchas gracias a todos por la ayuda. Si saben PHP echense una pasada por el foro de PHP que allí también necesito, por favor.