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ö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