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

Estado
Cerrado para nuevas respuestas

FOBE

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
20 Sep 2019
Mensajes
85
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.
 

wareon

Gamma
Social Media
Verificación en dos pasos desactivada
Desde
19 Abr 2015
Mensajes
204
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";
}

}
 

Frcruter

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
12 May 2020
Mensajes
67
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");
}
 

Leo Roronoa

Eta
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2019
Mensajes
1.430
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
 

FOBE

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
20 Sep 2019
Mensajes
85
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";
}

}
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
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");
}
(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


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
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)
 
Estado
Cerrado para nuevas respuestas

Arriba