Curso JavaScript desde 0 JQuery VI. Eliminando y reemplazando contenido II. Vídeo 34

Terminamos el ejemplo del vídeo anterior haciendo que el resto de imágenes de la página web respondan al evento y reemplacen el código gracias a la función replaceWith.

[TodoSociosanitario]

Amigos hay que ver la publicidad que aparece en los videos, al menos 15 segundos es la manera de que le paguen a este buen profesor para su dedicación

[gzzfrs]

Todo lo hice igual.... sin embargo cambie algo en el código de reemplazo que me hizo ahorrar muchas líneas.
function carrito(){
$(this).replaceWith('<div id="iamgen1" style="width:250px; height:175px; float: left;">Agregado al carrito</div>');
}
El -$(this)- nos indica que elemento se ha seleccionado (al dar click), sin la necesidad de una función como lo es el -if-

Gracias profesor!!!

[paulojes]

Estimado profesor: Es un honor volverlo a ver por estos lados!! Al igual que usted, yo tambien he tenido un mes de Octubre un tanto complicado, por lo que no he podido seguir sus cursos como lo venia haciendo; pero por suerte, ya puedo continuar y como siempre con este curso al mismo tiempo que el de Java.

Tengo que hacerle una aclaracion con respecto al codigo de este video. He reemplazado todo el codigo de la funcion carrito por el siguiente:

function carrito(e){
    
    var obj = e.target;
    
    $(obj).replaceWith("<div id='sustitucion'>Agregado al carro</div>");
}

La verdad funcionada bien, ya que desaparecen las imagenes sin que de error la consola.

Lo unico que si me ocurre, es que al presionar en una imagen, por ejemplo en la segunda, me aparece el texto "agregado al carro" bien a la izquierda de la web, y mueve todas las imagenes para la derecha. Eso pasa con todas y sin importar de que forma escriba la funcion carrito. Creo que esto se debe a que desaparece el bloque correspondiente a cada imagen. Por lo cual la unica forma de resolverlo que encontre es dejando el codigo CSS:

#imagen1, #imagen2, #imagen3, #imagen4{
    float:left;
    margin:15px;
    width:350px;
    height:200px;
    font-size:36px;
}

por mas que el ID siga siendo "sustitucion". De esta forma, no se mueven las imagenes al clickearlas. Supongo que habra una mejor solucion.

Desde ya muchas gracias por los cursos. Un saludo muy grande desde Argentina.

[msasoftware]

Muchas gracias, por su curso. Admiro su pedagogía al explicar. Felicitaciones.

[EstebanQuijadaSuazo]

Espero que este muy bien en su trabajo y familia, y que cuando pueda regrese a estos cursos que son muy buenos, saludos

[juanjosechamorro]

Hola, iniciaré con FELICITARLO por el excelente trabajo, y segundo como me hubiera gustado que mis profesores de programación tuvieran su metodología. Soy casi ing. de sistemas y la verdad es que ya había tomado una cátedra de desarrollo web pero la verdad se quedo corta y en este momento estoy siguiendo todos los videos.
El aprendizaje durante los videos ha sido excelente, nuevamente lo felicito y nada animarlo a que siga así. GRACIAS por el excelente curso.
Aclarar una cosa, HTML no es un lenguaje de programación y a veces llegar con esos comentarios a las aulas de clase hace que los compañeros, quienes conocen del tema claro esta, le hagan Bullying. Lo digo por experiencia propia...

[vl]

Muy buen vídeo, este curso me gusta mas por momentos

Estuve revisando selectores css y encontré un ejemplo que pusiste en ese curso con a[href*="www"] y vi que podría usarse aquí así y poder seleccionar todos los div que tienen una id que comienza por imagen

div[id^="imagen"]{
float:left;
margin:15px;
width:350px;
height:200px;
font-size:36px;
}

empiezo a juntar las cosas y me encanta, muchas gracias ++

[robertolavin]

para el tema de los estilos en vez de usar id que es un identificador unico, usar class
en js:
replaceWith('<div class="sustitucion1">Agregado al carro</div>');

en css:
.sustitucion1 {
float: left;
width: 250px;

[adriancordova]

Me costó un poco entender el concepto de "objetos de evento". Hasta que entendí que los eventos son objetos, con sus propiedades y métodos (por ahora lo entiendo así). Y cuando una función está asociada a un evento, es posible que dicha función reciba como argumento el evento. Para ello, basta con especificar en la definición de la función un parámetro. Así, cuando la función sea invocada al producirse el evento, la función sabrá que está recibiendo el evento con el que se asocia. Y por otro lado, es mejor que las condicionales sean de tipo "if_else-if_else" para evitar que las demás se evalúen al cumplirse una de ellas. Saludos y muchas gracias por la enseñanza.

[pildorasinformaticas]

Vicsen Morantes: Gracias por el aporte !!! Un saludo

[miguelangelvasquezgarcia]

Muchas gracias por estos videos, gracias por compartir de forma gratuita tu conocimiento, saludos desde Mexico

[oidigoras]

Juan muchísimas gracias por tus vídeos son de lo mejorcito que hay por la red.. llevo bastantes cursos tuyos! :) te debo mucho Juan! Un abrazo muy fuerte compañero!

Por cierto, aquí dejo una alternativa para añadir las imágenes al "carrito".

$(document).ready(function() {

var img = img");

for(var i = 0; i<img.length;i++){

img[i].addEventListener("click", cambiar_texto, false);

}

});

function cambiar_texto(e){

var img =

if(e.target = img){

$(e.target).replaceWith("<div

}

}

[MrPablobb]

Gracias por su esfuezo!!...Espero que sigamos teniendolo mucho tiempo explicando. Salu2

[diegopichaco]

me encanta tu manera de explicar bueno ya lo sabe, y de explicar como hacer las cosas de distintas maneras, pero bueno dejo un código muy cortito para realizar el ejercicio:

<script>
$(document).ready(function() {
//var
// z.addEventListener("click", cerrar, false);
// function cerrar(){
// $("#banner").remove();
//
// }
$("#cerrar").click(diego);
//var img");
$("#carrete img").click(mi
);


function diego(){
$("#banner").remove();
}
function mi(){
$(this).replaceWith("<div

}

});

</script>

[jordimasianavarro]

Hola el error que muestra en consola sobre el addEventListener es sobre la declaración del bucle for que se olvido de darle la pauta de que mientras i sea menor que lo largo del array, si se pone así ya desaparece dicho error
for(var i=0;i<imagenes.length;i++){
imagenes[i].addEventListener("click", carrito, false);
}
Por cierto fantástico curso

[josepico]

Buenas, yo lo solucioné de la siguiente forma antes de terminar de ver el vídeo, como para pensar un poco, pero obviamente es atado con alambre, (lo primero que se me ocurrió) si fueran muchas imágenes no serviría. Excelente los vídeos como siempre.
var flag1=true;
var flag2=true;
var flag3=true;
var flag4=true;
function remplazarPorTexto(num){

if(flag1==true && num.target==imagen1){
id='sustitucion'>Agregado al carro de compras</div>");
flag1=false;
}
if(flag2==true && num.target==imagen2){
id='sustitucion'>Agregado al carro de compras</div>");
flag2=false;
}
if(flag3==true && num.target==imagen3){
id='sustitucion'>Agregado al carro de compras</div>");
flag3=false;
}
if(flag4==true && num.target==imagen4){
id='sustitucion'>Agregado al carro de compras</div>");
flag4=false;
}

[doncarlos]

Buenas a todos, yo he probado con este código y me funciona a la perfección, nose si sera la forma correcta.

$('#carrete img').click(function(){
$(this).replaceWith("<div id='sustitucion'>Agregado al carrito</div>")
})

[pildorasinformaticas]

M largue: abre el archivo con Chrome, abre la consola con F12. Mira el nº de línea que te marca el error. Copia y pega aquí la línea que te marca el error para que yo pueda ver que has programado en esa línea. 

Un saludo

[leonardocarrillo]

para el 2021 cuando se quiere saber cual es el desencadenante de la acción en la funcion carrito
es: if(num.target.id==1){}

[Davgarcia]

Podemos solucionar el error facilmente si en vez de comparar el objeto en cuestión lo hacemos directamente por su id. Es decir: if(e.target.id=="img1"){ ... }.