JavaScript - Mostrar valor de una variable

Mostrar valor de una variable

Publicado por fran (2 intervenciones) el 27/02/2008 20:03:17

Hola a todos. Soy principiante pero le pongo mucho empeño.
Quiero saber como poner el valor de una variable en mi pagina web.
Ejemplo: tengo un script donde almaceno en la variable "dia" el día de la semana, por ejemplo lunes. Hasta aqui todo bien pero el problema me surge al querer poner el valor de mi variable en la página SIN UTILIZAR "document.write" ya que quiero mostrarlo con un texto más resaltado y posicionarlo donde yo quiera (en una capa por ejemplo) y no donde me lo pone "document.write".

Si alguien puede darme alguna idea se lo agradeceria mucho.

Un saludo y gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:Mostrar valor de una variable

Publicado por Lord Sairtanikvs (20 intervenciones) el 28/02/2008 09:22:55

Hola.

Prueba con lo siguiente.

document.getElementById("elIdDeLaCapa").innerHTML=variable;

De manera sencilla sería eso. con esa instruccion puedes cojer cualquier elemento html en javascript y modificarlo en tiempo de ejecucion, con innerHTML lo que haces es que a las etiquetas de tipo contenedor, como capas, labels, cualquiera que pueda tener texto o cosas dentros, puedas modificar su contenido.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

RE:Mostrar valor de una variable

Publicado por don_fran (2 intervenciones) el 28/02/2008 22:23:05

Gracias por la contestacion pero no termina de salirme. He hecho el sigiente ejemplo:

<html>

<head>

<script>

function carga()

var texto="hola a todos";

document.write(texto);

var texto2 = "<p>Aparecera este mensaje</p>";

document.getElementById("contenido").innerHTML = texto2;

</script>

</head>

<body onLoad="carga()">

<div id="contenido" style="position:absolute; left:2; top:100; width:250; background:yellow; visibility:visible">

</div>

</body>

</html>

¿Que hago mal?? ¿Por que no me sale el texto en la capa?

Un saludo

Valora esta respuesta

Comentar

RE:Mostrar valor de una variable

Publicado por Alberto (1 intervención) el 22/09/2019 09:14:53

Tal vez esto pueda servirte...

<html>

<head>

<script type="text/javascript">

function carga(){

  var texto="Hola a todos";

  document.documentElement.innerHTML = texto + "<br />" + "<br />" + "<p>" + "Aparecerá este mensaje" + "</p>";

</script>

</head>

<body onLoad="carga()">

</body>

</html>

Valora esta respuesta

Comentar

RE:Mostrar valor de una variable

Publicado por wfwfwf (2 intervenciones) el 04/04/2021 18:50:38

No es necesario concatenar "texto" con el resto de etiquetas después del innerHTML, pues es lo mismo que no colocarlo.

Valora esta respuesta

Comentar

RE:Mostrar valor de una variable

Publicado por fefe (1 intervención) el 04/04/2021 18:43:45

Que tal si pones la etiqueta de <script> abajo del body por el flujo, elimina el numero de la variable "texto2".

Valora esta respuesta

Comentar

RE:Mostrar valor de una variable

Publicado por kjfefe (2 intervenciones) el 04/04/2021 19:52:28

Mira, ya lo logre con textConten.

var con=document.getElementById("contenido")

con.innerHTML = texto.textConten;

Valora esta respuesta

Comentar

Pos: 11

Val: 368

Mostrar valor de una variable

Publicado por Gio (79 intervenciones) el 10/04/2021 08:19:31

Buenas Fran. La función document.write() escribe siempre al final del documento (excepto cuando ejecutas dicha función en una página desde la consola del navegador, esa página se vaciará por completo y escribirá lo que le indiques).

Lo primero que tenés que hacer, es acceder al elemento que quieres modificar, para ello tienes las siguientes funciones típicas.

Acceder mediante su ID:

<div id="laID"> </div>

<script>

    document.getElementById("laID");

</script>

Acceder mediante su CLASS:

<div class="elemento"> Primero </div>

<div class="elemento"> Segundo </div>

<div class="elemento"> Tercero </div>

<div class="elemento"> Cuarto </div>

<script>

    document.getElementsByClassName("laID")[0]; //SE ACCEDE AL PRIMER ELEMENTO

    document.getElementsByClassName("laID")[3]; //SE ACCEDE AL CUARTO ELEMENTO

</script>

IMPORTANTE: Los scripts JS deben ir bajo una estructura HTML para poder afectarla ya que el flujo de ejecución de HTML es de arriba a abajo y de izquierda a derecha, así que a la hora de ejecutar un script, si la ejecución de dicho código no ha creado los elementos HTML a afectar, pues simplemente no se afectarán ya que tu script no será capaz de encontrar algo que aún no existe.

NOTA: Los atributos CLASS (clase) se pueden repetir cuantas veces quieras, osea que pueden haber mas de un elemento con class="hola" por ejemplo. Pero las IDs (identificador único) no se pueden repetir, osea que solo puedes tener un elemento con id="hola" en todo el documento.

Lo segundo que tenés que hacer, es realizar la modificación que necesites sobre el elemento que quieras.

innerHTML:

Guardar el contenido HTML interno de un elemento dentro de una variable:

<div id="miElemento"><p><b>Texto</b> cualquiera</p></div>

<script>

    var contenido = document.getElementById("miElemento").innerHTML;

    // LA VARIABLE contenido ALMACENA LA CADENA DE TEXTO "<p><b>Texto</b> cualquiera</p>"

</script>

Modificar el contenido HTML interno de un elemento deseado:

<div id="miElemento"><p><b>Texto</b> cualquiera</p></div>

<script>

    document.getElementById("miElemento").innerHTML = "<p><b>Texto</b> cualquiera mas largo</p>";

    // AHORA EL ELEMENTO CUYA ID ES miElemento CONTIENE DENTRO LA SIGUIENTE ESTRUCTURA HTML "<p><b>Texto</b> cualquiera mas largo</p>"

</script>

innerText:

Guardar el texto interno de un elemento deseado:

<div id="miElemento"><p><b>Texto</b> cualquiera mas largo</p></div>

<script>

    var contenido = document.getElementById("miElemento").innerText;

    // LA VARIABLE contenido ALMACENA LA CADENA DE TEXTO "Texto cualquiera mas largo"

</script>

Si te fijas, solamente se almacenó el texto. A diferencia de innerHTML, innerText ignora las etiquetas HTML.

Modificar el texto interno de un elemento deseado:

<div id="miElemento"><p><b>Texto</b> cualquiera mas largo</p></div>

<script>

    var contenido = document.getElementById("miElemento").innerText = "Un texto distinto";

    // AHORA EL ELEMENTO CUYA ID ES miElemento CONTIENE DENTRO EL SIGUIENTE TEXTO "Un texto distinto"

</script>

Espero que esta info te sea de utilidad, un saludo.

Valora esta respuesta

Comentar

Recorrer html

Ayuda con estos problemas