0

estoy aprendiendo javascript y quiero hacer la siguiente accion: tengo un icono de awesome icons con una clase de bootstrap:

 <div class="col-12 pt-3">
    <i class="fas fa-thumbs-up text-secondary"></i>
 </div>

lo que quiero hacer es que al darle click a ese i me cambie de text-secondary a text-primary. Leyendo saque esto de w3shcool lo cual pense que modificandolo un poco quedaria pero no fue asi:

function myfuction() {
 var x = Document.getElementsByClassName("fas");

 x[0].style.BackgrundColor = "text-primary";
}

pero sin que me de resultado. alguno que pueda ayudarme x favor???

2
  • Si estás empezando te recomiendo que hagas el tutorial de w3schools, que está muy bien y tiene muchos ejemplos y ejercicios para hacer. w3schools.com/js/default.asp
    – xero399
    el 14 oct. 2019 a las 12:10
  • Tenes que tener en cuenta, que text-primary no es un BackgroundColor, sino una clase, te recomiendo que leas acerca de lo que es un Id y una clase antes de seguir con tus pruebas, ya que son conceptos vitales para poder aprender JavaScript el 14 oct. 2019 a las 13:35

3 respuestas 3

2

text-primary no es un color, es una clase de Bootstrap. Lo que deberías hacer es quitarle la clase text-secondary (x[0].classList.remove("text-secondary");) y añadirle la clase text-primary con x[0].classList.add("text-primary");

A parte estás haciendo style.BackgrundColor que cambiaría el color de fondo, no el del logo.

También te faltaría asignar un evento al icono para que ejecute la función. En tu caso sería x[0].addEventListener("click", myFunction);

Échale un ojo a estos enlaces: https://getbootstrap.com/docs/4.0/utilities/colors/ https://www.w3schools.com/jsref/met_document_addeventlistener.asp https://www.w3schools.com/jsref/dom_obj_event.asp

0

gracias a todos por la pronta respuesta, me puse a leer los enlaces que mandaron y algun que otro video de youtube y lo solucione de la siguiente mandera:

function like() {
document.getElementById("like").classList.remove("text-secondary");
document.getElementById("like").classList.add("text-primary");
}
document.getElementById("like").onclick = function (){
like();
}
0
$("#id-del-div").click(function() {
     $("#id-del-div").removeClass("text-secundary");
     $("#id-del-div").addClass("text-primary");

});

Ya para colores en específico: sería crear un style con el background-color deseado.

.color-deseado {
  background-color: #fff;
}

// script
$("#id-del-div").click(function() {
  $("#id-del-div").removeClass("text-secundary");
  $("#id-del-div").addClass("color-deseado");
}

);
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.