2017-09-06 9 views
0

Je suis en train de créer un effet où une adresse e-mail change dynamiquement à l'aide jquery.bubble.text.jsScript pour changer element.style.color dans DOM

œuvres Tout trouvent, sauf pour permettre le texte à changer de couleur. Je ne sais pas si c'est parce que j'ai un span id = "bubble" en tant qu'enfant d'un id de div = "colorchange". Le script que je l'ai utilisé est -

var x = document.getElementById('bubble').innerHTML; if(x == "Well, not anything!" || x == "You get the point..") { document.getElementById('colorchange').innerHTML.style.color = "#FF0000" }

Je le code HTML, CSS et JS et une image plus précise et illustration de ce que je suis en train de réaliser dans un codepen HERE

Merci ou votre aide !

+0

Ce code ne continue pas à fonctionner ... il s'exécute une fois et est terminé. Vous devez trouver un événement que le script déclenche pour indiquer que le texte a changé. – epascarello

+0

Je pense que vous devriez ajouter un 'else' à ce' si 'en colorant le texte en blanc –

+0

'x' est plein de' ... 'il ne contiendra jamais le texte que vous testez ... –

Répondre

-1

Utilisez window.setInterval(<function_name>, <interval>) et mettre votre code dans une fonction, par exemple:

window.setInterval(color_text, 500); 

function color_text(){ 
    var x = document.getElementById('bubble').innerHTML; 
    if(x == "Well, not anything!" || x == "You get the point..") { 
    document.getElementById('colorchange').innerHTML.style.color = "#FF0000" 
    } 
} 

Je ne sais pas si style existe sur innerHTML. Sinon, utilisez document.getElementById('colorchange').style.color.

+0

Bien s'assurer que le style n'existe pas sur innerHTML, parce que c'est une chaîne, et c'est la seule chose mal avec le code de l'OP. –

+0

Cette suggestion est vraiment stupide. Pourquoi 'setInterval' corrige-t-il quelque chose? Parlez d'une solution de contournement aveugle! Je suis assez sûr que la console de l'OP est toujours pleine d'erreurs JS –

+0

Vous devez exécuter ce code constamment. Dans le code de question d'origine a été exécuté qu'une seule fois –

1

Ne pas le style de la innerHtml, il est juste une chaîne comme "Hello, World!", pas l'élément qui le contient, pour le style de l'élément utilisez:

var x = document.getElementById('bubble').innerHTML; 
 
if(x == "Well, not anything!" || x == "You get the point..") { 
 
     document.getElementById('colorchange').style.color = "#FF0000"; 
 
}
<span id="colorchange"> 
 
    <span id="bubble">Well, not anything!</span> 
 
</span>

0

Merci @Marcin Szwarc

Cela a fonctionné, mais le texte n'a pas changé en arrière du rouge au blanc, donc j'ajouté

else { 
document.getElementById('colorchange').style.color = "#FFFFFF" } 

Merci pour votre aide!