[Resuelto]: Imprimir una variable de javascript en un title="" de html

Leguim · 7 Febrero 2020, 12:43 PM

Estoy teniendo problemas para hacer esto, es que quiere imprimir una variable de javascript en html... generalmente lo que hago es..

Código (javascript) [Seleccionar]

"<script type='text/javascript'>document.write('este es el valor de mi variable');</script>"

pero ya si quiero usarlo en un atributo title=""

no me imprime el valor sino que me imprime la cadena....

¿existe algun truco para hacer esto?

EdePC · 7 Febrero 2020, 15:50 PM

Saludos,

- Que yo sepa no se puede incrustar sentencias javascript dentro de valores de atributos, aunque quizá existan técnicas de XSS para estos XD.

- Lo que si puedes hacer es imprimir toda la etiqueta, por ejemplo:

-- No funciona:

Código (html5) [Seleccionar]

<p title=<script>document.write('')</script>>Lorem ipsum dolor sit amet</p>

-- Si funciona:

Código (html5) [Seleccionar]

<script>document.write('<p title="hola">')</script>Lorem ipsum dolor sit amet</p>

Leguim · 7 Febrero 2020, 16:10 PM

mmm

no será que exista algun método parecido a esto? (esto no creo que exista xd es solamente para mostrar un poco la idea)

<script>var variable = 'esto es información';</script>
<p tittle="" script="this.title = variable;"></p>

Los inspire?

EDIT:

ya casi lo termino, pero quiero que de entrada lo ponga y no cuando se haga un click, pero nose como hacerlo... ya falta poquito.... ¿alguna ayudita?

Código (javascript) [Seleccionar]


<script type="text/javascript">var variable = 'mi variable';</script>
<p title="texto" onclick="this.title = variable;"><script type="text/javascript">document.write(variable);</script></p>

EDIT 2:

ya está.

Código (javascript) [Seleccionar]


<script type="text/javascript">var variable = 'mi variable';</script>
<p title="texto" onmouseover="this.title = variable;"><script type="text/javascript">document.write(variable);</script></p>

WHK · 7 Febrero 2020, 17:00 PM

En jQuery:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script>
            $(document).ready(function(){
                
                variable = 'mi variable';

                $('#changeme')
                    .mouseover(function(){
                        $(this).attr('title', variable);
                    })
                    .text(variable); // Texto y no HTML, evita XSS
            });
        </script>
    </head>
    <body>
        <p id="changeme" title="texto"></p>
    </body>
</html>

Recuerda que en un buen desarrollo debes separar el tipo de código, por ejemplo el código javascript debería estar en un archivo js separado del html al igual que el css.

Saludos.

MinusFour · 7 Febrero 2020, 17:08 PM

Yo creo que lo mejor sería que usaras un framework como React, Vue, Angular, etc si vas a querer mezclar JS con HTML syntacticamente.

Leguim · 7 Febrero 2020, 17:25 PM

Cita de: WHK en 7 Febrero 2020, 17:00 PM
En jQuery:

Código (html4strict) [Seleccionar] Expandir
<!DOCTYPE html> <html> <head> <title></title> <script> $(document).ready(function(){ variable = 'mi variable'; $('#changeme') .mouseover(function(){ $(this).attr('title', variable); }) .text(variable); // Texto y no HTML, evita XSS }); </script> </head> <body> <p id="changeme" title="texto"></p> </body> </html>

Recuerda que en un buen desarrollo debes separar el tipo de código, por ejemplo el código javascript debería estar en un archivo js separado del html al igual que el css.

Saludos.

Entiendo, pero como la verdad no quiero trabajar con id="" o class="" para este caso en especifico me sirve más esa manera, muchas gracias a los 3.

@XSStringManolo · 8 Febrero 2020, 00:47 AM

Cita de: MiguelCanellas en 7 Febrero 2020, 12:43 PM
Estoy teniendo problemas para hacer esto, es que quiere imprimir una variable de javascript en html... generalmente lo que hago es..

"<script type='text/javascript'>document.write('este es el valor de mi variable');</script>"

pero ya si quiero usarlo en un atributo title=""

no me imprime el valor sino que me imprime la cadena....

¿existe algun truco para hacer esto?

Si te explicas mejor y exactamente oo que quieres hacer y con que objetivo te digo cual creo que es la solución correcta para cumplir ese objetivo.

Según el standart el script type= no es necesario desde hace muchos años. Hace algún tiempo si era recomendado añadirlo para servidores. Ya no.

Si quieres meter javascript dentro de html sin que se interprete, usa html entities o text nodes junto a createElement y appendChild. Si quieres meter html dentro de javascript es lo mismo. Para seleccionar atributos usa el querySelector que pilla como parámetro los mimos selectores que usas en css.

Como te dice WHK los archivos javascript deben ir separados completamente del html. Es decir usar <button type="button" onlick="MiFuncion()">click</click> es mala práctica. Todo el javascript debe ir externo.

archivo.js
let eventoBotón = getElementsByTagName("button")[0].addEventListener("click", function(){MiFuncion()});

o boton.onclick también es válido.

Deberías añadir CSP en la cabecera de respuesta de tu servidor para evitar que se incluyan archivos externos mediante inyecciones y opcionalmente en el propio documento HTML como meta tag. Lo mismo para el resto de archivos.

Flamer · 8 Febrero 2020, 17:04 PM

creo que quieres imprimir valores en la etiqueta title creo que seria asi

Código (javascript) [Seleccionar]


document.title="valores" + x;

bueno pero mejor te pongo un ejemplo para que veas como funciona

Código (javascript) [Seleccionar]


<html>
<head>
<title>Tiempo: 0</title>
<body>
<script>
var x;
var s=0;
setTimeout("segundo()",1000);
function segundo()
{
   s++;
   document.title="Tiempo: " + s;
   setTimeout("segundo()",1000);
}
</script>
</body>
</html>

dime si es eso