No puedo encontrar la solucion - Jquery

Jarkaos · #1 (**permalink**) 23/07/2013, 12:25

Hola a todos,

Estoy haciendo una simple pagina que contiene un campo de texto y un boton. La idea de la pagina es que si una persona escribe por ejemplo "oceano" en el campo de texto, al presionar el boton cambie el color de fondo de los divs a un color azul, lo mismo si escribe "bosque", el color de fondo de los elementos deberian cambiar a verde.
Mi problema es el siguiente, estoy usando jquery para encontrar la solucion pero suceden cosas extrañas. La primera vez que la pagina carga y escribo "oceano" los fondos cambian por un segundo al nuevo color pero despues vuelven al color original. Si escribo la palabra nuevamente, entonces el color azul se mantiene en su lugar. El otro problema es que, como vivo en suecia, si escribo la palabra por ejemplo "amor" en sueco o sea "kärlek" FF no reacciona pero si Safari y supongo que debe ser por la letra "ä". Como hago para que mi script reconozca ese tipo de letras?. Aqui les dejo el html y el js que estoy usando.

Código HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Finder</title>

		
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="styleChanger.js"></script>
		<link type="text/css" rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="header" class="bgColor">
				<header>
					<h1>Finder</h1>
				</header>
								<section id="searchForm">
					<form action="#">
						<input type="text" id="searchText" name="searchText" autofocus />
						<input type="submit" id="send" name="send" value="S&ouml;k" />
					</form>
				</section>
			</div>
<section id="resultsContainer">
							</section>

			
			<footer class="bgColor">
				Footer goes here
			</footer>
		</div>
				
	</body>
</html>

Este es mi script:

Código:

$(document).ready(function () {
	$("#send").click(function() {
		var keyWord = $("#searchText").val();
		changeColor(keyWord);
		
	})
	
	function changeColor(keyWord) {
		bgColor = $(".bgColor");

		/*alert(bgColor);*/
		
		switch (keyWord) {
			case(keyWord = 'love'): 
			bgColor.removeClass("bgColor").addClass("love");
			break;
			
			case(keyWord = 'sky'): 
			bgColor.removeClass("bgColor").addClass("sky");
			
			break;
		}
	}
	
});

Las clases que aparecen en el script estan declaradas en un archivo css que se carga antes de este script.
Gracias por la ayuda que me puedan dar.
Saludos

Jarkaos · #2 (**permalink**) 23/07/2013, 13:22

Creo que encontre la solucion. Quitando el <form> funciona bien.

ahora tengo un evento click que ejecuta la funcion cuando el usuario ha click en el boton, como agrego cuando el usuario presiona enter?

Jarkaos · #3 (**permalink**) 23/07/2013, 13:46

ok,

asi se ve mi script ahora y funciona sin importar el tipo de letra:

Código Javascript:

Ver original$(document).ready(function() {
    var keyWord;
    var theElement = $("#headerContainer,footer");
    var resultContainer = $("#resultsContainer");
    $("#send").click(function() {
        keyWord = $("#searchText").val();
        
        switch(keyWord) {
            case(keyWord = 'love'):
            case(keyWord = 'kärlek') :
                
                theElement.removeClass().addClass("love");
                resultContainer.removeClass().addClass("loveResultContainer");
                break;
                
            case(keyWord = 'sky') : 
            case(keyWord = 'himmel') : 
                theElement.removeClass().addClass("sky");
                resultContainer.removeClass().addClass("skyResultContainer");
                break;
                
            case(keyWord = 'forest') : 
            case(keyWord = 'skog') : 
                theElement.removeClass().addClass("forest");
                resultContainer.removeClass().addClass("forestResultContainer");
                break;
                
            case(keyWord = 'summer') : 
            case(keyWord = 'sommar') : 
                theElement.removeClass().addClass("summer");
                resultContainer.removeClass().addClass("summerResultContainer");
                break;
                
            case(keyWord = 'winter') : 
            case(keyWord = 'vinter') : 
                theElement.removeClass().addClass("winter");
                resultContainer.removeClass().addClass("winterResultContainer");
                break;
        }
    });
    
});

se puede arreglar mas este codigo? Ahora solo funciona con 5 palabras en dos idiomas pero seria imposible para mi usar todas las palabras que a una persona se le pueda ocurrir.

Alexis88 · #4 (**permalink**) 23/07/2013, 15:25

Para que hagas lo mismo pero presionando la tecla ENTER, tendrías que cambiar el evento click por keypress:

Código Javascript:

Ver original$(document).ready(function(){
    $("#searchText").keypress(function(tecla){
        if(tecla.keyCode==13){ //13 es el código ASCII de la tecla ENTER
            //REALIZA TUS PROCEDIMIENTOS
        }
    });
});

Saludos.