JQuery - Como muestro texto en un div?

 
Vista:
sin imagen de perfil
Val: 7
Ha aumentado su posición en 50 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Como muestro texto en un div?

Publicado por Ricardo (5 intervenciones) el 30/05/2017 19:28:06
Hola, necesito mostrar resultados en un Div. Intento mostrar la multiplicacion hasta 10 de un numero ingresado pero no se como añadir el resultado a un div, Espero su respuesta! saludos!

Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
$("document").ready(function(){
       $("#btnTabla").click(function(){
		alert("Inicio");
		var x = 0;
		var numero = $("#numTlaba").val();
		var y = 0;
		while(x<10){
			x+=1;
			y = x*numero;
			$("#resultado").load("<p>"+numero+"*"+x+"="+y+"</p>");
		}
	});
});


HTML
1
2
3
4
5
6
7
8
9
10
<div class="input-load">
	<div class="inputs">
		<input type="number" class="form-group" id="numTlaba" placeholder="Ingresa un numero">
		<hr>
		<button class="btn" id="btnTabla" >Enviar</button>
 
	</div>
        <div class="resultado">
	</div>
</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Como muestro texto en un div?

Publicado por Horroroso (65 intervenciones) el 30/05/2017 23:34:12
Hola, Casi lo tienes, solo faltan unas pequeñas cosas...
primero, hay que evitar que el boton haga un submit, para eso, agrega preventDefault,

Luego, en lugar de Load utiliza append, y por ultimo,

en lugar de usar $("#resultado"), utiliza $(".resultado"), usar # es para hacer referencia al id, en este caso tienes una clase, asi que utiliza el punto '.'

al final el codigo queda asi:

1
2
3
4
5
6
7
8
9
10
11
12
$("#btnTabla").click(function (e) {
                e.preventDefault()
                alert("Inicio");
                var x = 0;
                var numero = $("#numTlaba").val();
                var y = 0;
                while (x < 10) {
                    x += 1;
                    y = x * numero;
                    $(".resultado").append("<p>" + numero + "*" + x + "=" + y + "</p>");
                }
            });

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 50 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Como muestro texto en un div?

Publicado por Ricardo (5 intervenciones) el 01/06/2017 03:49:46
la clase es para Hojas de estilo, si uso la clase para jquery a la vez, no se interrumpe algo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Como muestro texto en un div?

Publicado por Horroroso (65 intervenciones) el 01/06/2017 16:50:17
No pasa nada, la clase en jQuery es una referencia solamente. Y es muy util.
Supongamos que tienes 4 div:
1
2
3
4
<div id='div1' class='marco'></div>
<div id='div2' class='marco'></div>
<div id='div3' class='marco'></div>
<div id='div4' class='marco'></div>

y quieres hacer referencia a algun div, digamos al div3:
1
var Div3=$('#div3')
Pero que sucede si quieres hacer referencia a todos los divs (Incluso a divs nuevos que se creen dinamicamente!)

puedes utilizar algo que tienen en comun: Su clase.
1
$('.marco')

De esta forma, $('.marco') hace referencia a todos los elementos que contengan la clase "marco", incluso, pueden estos no ser divs, supongamos que tienes ademas:
1
<span class='marco'>

$('.marco') hará referencia a los 4 divs y 1 span.

Si quisieras que fuera solamente los divs con clase marco, utilizas:
1
$('div.marco')

Y como un elemento puede tener mas de una clase, puede pertenecer a varios grupos:
1
<div class='marco presentacion'>

Espero que te haya ayudado.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar