Ayuda con codigo javascript (detectar if(fuentes cortas y largas))

primero disculparme por las faltas que pueda cometer (escritura, codigo, expresion y mas)


ejemplo:

<p id="p" class="p">soy P</p>
<button id="button" class="button">boton</button>
<button id="button2" class="button2">boton2</button>
<button id="button3" class="button3">boton3</button>
<button id="button4" class="button4">boton4</button>
<button id="button5" class="button5">boton5</button>

<style>
.p{
font-family: helvetica;
}
</style>

<script>
document.getElementById("button").addEventListener("click", cer);

function cer(){

if(document.getElementById("p").style.fontFamily == "brush script mt"){
document.getElementById("p").style.fontFamily = "impact";
document.getElementById("p").style.color = "yellow";
}

if(document.getElementById("p").style.fontFamily == "comic sans MS"){
document.getElementById("p").style.fontFamily = "algerian";
document.getElementById("p").style.color = "green";
}

if(document.getElementById("p").style.fontFamily == "arial"){
document.getElementById("p").style.fontFamily = "garamond";
document.getElementById("p").style.color = "pink";
}

if(document.getElementById("p").style.fontFamily == "helvetica"){
document.getElementById("p").style.fontFamily = "broadway";
document.getElementById("p").style.color = "gray";
}

}


document.getElementById("button2").addEventListener("click", cer2);

function cer2(){
document.getElementById("p").style.fontFamily = "brush script mt";
document.getElementById("p").style.color = "blue";

}

document.getElementById("button3").addEventListener("click", cer3);

function cer3(){
document.getElementById("p").style.fontFamily = "comic sans MS";
document.getElementById("p").style.color = "red";

}
document.getElementById("button4").addEventListener("click", cer4);

function cer4(){
document.getElementById("p").style.fontFamily = "arial";
document.getElementById("p").style.color = "orange";

}
document.getElementById("button5").addEventListener("click", cer5);

function cer5(){
document.getElementById("p").style.fontFamily = "helvetica";
document.getElementById("p").style.color = "brown";

}
</script>

este es un ejemplo malo pero puede servir para lo que quiero conseguir
(el primer boton lo puse para hacer la comprobacion y ver si funciona pero no quisiera tener que hacer click en el boton para comprobarlo)


objetivo:

que al dar click en un boton cambie el texto de fuente (depende el boton al que hagas click cambie a una u otra fuente) y depues al hacer click en el primer boton el texto cambie de nuevo a una fuente nueva dependiendo la fuente anterior.

(añadi colores para que se aprecie mejor los cambios)


no estoy seguro pero si la fuente tiene mas de un nombre (times new roman, comic sans MS) me da problemas en arial, helvetica y fuentes de 1 nombre no hay problema (y si pongo = o == toma 1 u otra "referencia" pero no sirve para controlarlo todo.


(el objetivo final no es estar cambiando de fuentes ni de colores es que depende la fuente haga una cosa u otra (que no seria cambair la fuente de nuevo) pero el if con fuentes de mas de un nombre me dan fallo (bueno no hacen lo que quiero)


gracias.

Hola,

Agrega un escape de comillas a tu condición (\")

Prueba esto:


function cer(){

if(document.getElementById("p").style.fontFamily == "\"brush script mt\""){
document.getElementById("p").style.fontFamily = "impact";
document.getElementById("p").style.color = "yellow";
}

if(document.getElementById("p").style.fontFamily == "\"comic sans MS\""){
document.getElementById("p").style.fontFamily = "algerian";
document.getElementById("p").style.color = "green";
}

if(document.getElementById("p").style.fontFamily == "arial"){
document.getElementById("p").style.fontFamily = "garamond";
document.getElementById("p").style.color = "pink";
}

if(document.getElementById("p").style.fontFamily == "helvetica"){
document.getElementById("p").style.fontFamily = "broadway";
document.getElementById("p").style.color = "gray";
}

}

Si es que entendí bien tu problema;
puedes probar con includes, con && (and) en tu caso ya que quieres que contenga los dos. (o puedes poner uno)

var fuenteDelIdP = document.getElementById("p").style.fontFamily;
if(fuenteDelIdP.includes("times new roman") && fuenteDelIdP.includes("comic sans MS"){
console.log("incluye los dos");
}

crea las clases mejor

.clase1 {font-family:"fuenteEQUIS";}
.clase2 {font-family:"fuenteSECUNDARIA";}
.clase3 {font-family:"fuenteDElosDESEOS";}

y con javascript solo cambias la clase
y para detectar cual fuente está actualmente, checas que clase tiene actualmente el elemento

wareon dijo:

Hola,

Agrega un escape de comillas a tu condición (\")

Prueba esto:


function cer(){

if(document.getElementById("p").style.fontFamily == "\"brush script mt\""){
document.getElementById("p").style.fontFamily = "impact";
document.getElementById("p").style.color = "yellow";
}

if(document.getElementById("p").style.fontFamily == "\"comic sans MS\""){
document.getElementById("p").style.fontFamily = "algerian";
document.getElementById("p").style.color = "green";
}

if(document.getElementById("p").style.fontFamily == "arial"){
document.getElementById("p").style.fontFamily = "garamond";
document.getElementById("p").style.color = "pink";
}

if(document.getElementById("p").style.fontFamily == "helvetica"){
document.getElementById("p").style.fontFamily = "broadway";
document.getElementById("p").style.color = "gray";
}

}

Hacer clic para expandir...

probando solo el codigo funcionaba pero al incluirlo en el mio no (quite casi todo lo relacionado con las fonts por si algo causaba conflicto y a al ponerlo de nuevo si funciona, tendre que seguir probando para ver si cuando vuelva a poner todo causa fallo (seguro yo tengo algo mal) pero de momento lo use en un modo simple solo que detecte fontFamily y haga algo (parecido al ejemplo) y funciona

funciona gracias

Frcruter dijo:

Si es que entendí bien tu problema;
puedes probar con includes, con && (and) en tu caso ya que quieres que contenga los dos. (o puedes poner uno)

var fuenteDelIdP = document.getElementById("p").style.fontFamily;
if(fuenteDelIdP.includes("times new roman") && fuenteDelIdP.includes("comic sans MS"){
console.log("incluye los dos");
}

Hacer clic para expandir...

(no queria que hubieran dos solo que detectara si la fuente era con 2 nombres o mas como comic sans MS para poner un if dependiendo la fuente (solo lo hacia con arial, helvetica y fuentes de 1 nombre))

pero gracias por tu tiempo y ayuda

Leo Roronoa dijo:

crea las clases mejor

.clase1 {font-family:"fuenteEQUIS";}
.clase2 {font-family:"fuenteSECUNDARIA";}
.clase3 {font-family:"fuenteDElosDESEOS";}

y con javascript solo cambias la clase
y para detectar cual fuente está actualmente, checas que clase tiene actualmente el elemento

Hacer clic para expandir...

no he comprobado si funciona ya que use el codigo de Wareon ya que es sencilla para "implementarlo" en mi codigo (aunque prefiero no tocar las clases ya que tengo algunas acciones que depende de las clases)(tengo entendido que el id solo es 1 pero clases puedes usar mas de 1 (quizas me equivoque))

pero muchas gracias por tu tiempo y ayuda (quizas en un futuro esta forma la necesite)