Modificar HTML con JavaScript y un textarea

nani6to · #1 (**permalink**) 19/09/2012, 07:34

Hola!

Antes que nada perdón si me he equivocado de foro. La verdad es que se me ha ocurrido una idea y no sé si es posible realizarla, aunque yo creo que si se debe poder.

Tengo el botón de Twittear en mi web que lo proporciona twitter. Su código HTML es el siguiente:

Código PHP:

  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.extremafm.com" data-text="AQUI VA EL TEXTO DEL TWEET" data-via="RadioExtremaFM" data-lang="es" data-size="large" data-count="none" data-hashtags="ExtremaFM">Twittear</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Al pulsar en él podemos twittear justo lo que hay escrito en el HTML del tweet (en el campo data-text).

Ahora bien, me gustaría hacer un textarea con un formulario (que no tenga botón de enviar ni nada), y que al escribir en él cambie el contenido del data-text del botón de twitter y el usuario pueda personalizar el tweet desde la misma página, es decir que escriba y le de a twittear y se abra ya el tweet tal cual lo ha escrito en el cuadro de texto de la página.

La pregunta es ¿es esto posible? y si se puede ¿como debo hacerlo? La verdad es que le estuve dando vueltas y no tengo ni idea de por donde empezar, ando muy perdido.

Muchas gracias!

Dradi7 · #2 (**permalink**) 19/09/2012, 10:11

bueno primero debes poner un id a tu href por ejemplo digamos que sea twitterComment entonces para poder cambiar el data-text solamente te bastaría con esto

document.getElementById('twitterComment').setAttri bute('data-text','NUEVO TEXTO');

nani6to · #3 (**permalink**) 19/09/2012, 11:26

Vale, hasta ahora todo bien, consigo que me salga lo de 'NUEVO TEXTO', pero sigo sin saber como coge el NUEVO TEXTO del formulario, este es el formulario que tengo:

<form name="formulario">
<textarea name="twitteando" rows="5" cols="40" maxlength="120"></textarea>
</form>

Muchas Gracias!

Dradi7 · #4 (**permalink**) 19/09/2012, 11:48

ya entonces ponle un ID a tu textarea y solo haz esto por ejemplo supongamos que se llame comment

var mensaje = document.getElementById('comment').innerHTML;

document.getElementById('twitterComment').setAttri bute('data-text',mensaje);

nani6to · #5 (**permalink**) 19/09/2012, 12:02

Vale, ahora tengo todo puesto para que coja el valor del textarea, la guarde en la variable mensaje y cambie en el data-text el mensaje.

Pero no me funciona. En vez del mensaje escrito en el textarea, me sale undefined

No sé si hice algo mal...

Te pego todo el body del HTML:

Código HTML:

<body>
    <form name="formulario"> 
<textarea name="twitteando" id="twitteando" rows="5" cols="40" maxlength="99"></textarea>
</form> 


<a href="https://twitter.com/share" id="twitterComment" class="twitter-share-button" data-url="http://www.extremafm.com" data-text="Escuchando la mejor musica 24 horas" data-via="RadioExtremaFM" data-lang="es" data-size="large" data-count="none" data-hashtags="">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); var mensaje = document.getElementById('twitteando').innerHTMLL; document.getElementById('twitterComment').setAttribute('data-text',mensaje);</script>

</body>

Gracias!

Dradi7 · #6 (**permalink**) 19/09/2012, 12:08

entonces cambia el innerHTML por el value

nani6to · #7 (**permalink**) 19/09/2012, 12:21

Ahora por más que escriba, me sale en blanco, no me sale ningún texto

nani6to · #8 (**permalink**) 19/09/2012, 12:23

Vale, te explico. El undefined aparecía porque innerHTML lo tenia escrito mal, habia puesto innerHTMLL.

Aún así, acabo de probar poniendolo bien, y me sigue apareciendo el texto en blanco.

nani6to · #9 (**permalink**) 19/09/2012, 12:26

Acabo de editar el HTML del textarea y he puesto texto dentro a mano.

Le he dado al botón de twittear y me ha salido el texto que habia puesto, así que está todo bien.

Lo único que yo quería que actualizase en tiempo real lo que yo escribiera en el formulario a la variable mensaje.

¿Como hago eso?