I'm new to JS, and I was wondering if there is a way to change the background-color depending on the value of an input field. For example, if the user types 'happy' the background color turns blue. I'm assuming JS is used for this, but I'm not sure.
Thanks
inputElement.addEventListener('change', function() {
if (inputElement.value === 'happy') {
inputElement.style.backgroundColor = 'blue';
}
else if (inputElement.value === 'sad') {
inputElement.style.backgroundColor = 'red';
}
});
Why are you sad, user?
This doesn't seem to work
You need to either press Enter or lose focus after typing. Alternatively you would poll the input for changes with a timeout/interval.
>encouraging if/else pyramids
Do something like this:
console.log("Hello world");
myMap = {
"happy": (name) => {
console.log(`The ${name} happy`);
},
"sad": (name) => {
console.log(`The ${name} sad`);
}
};
myMap["happy"]("user");
myMap["sad"]("cuck");
myMap["happy"]("white");
myMap["sad"]("male");
Or you can add a listener for the "input" event instead of change
what a piece of shit
>convoluting your code with abstract bullshit
Maybe I'm a professional developer who focuses on clarity and not a moron like you who prefers to stroke his ego
IE support
Agreed since it's supported in IE > 9 only. Maybe keyup event?
None of the workarounds work as good as simple polling does
Replace change with input
...
Enter does nothing, buttons+form does nothing.
This is my code so far.
who is this semen demon
Your future direct supervisor
I don't understand how this is supposed to help me
Idea for your next thread
>how to vertically center text with css
...
Why did I fall for the bait
jsfiddle.net
>new to JS
turn back now
You're using the wrong event for this. Use something like keyup or keydown.
Expressivity doesn't always mean convenience :)
Why would you ever do this?
Might as well just make it a function.
const shit = a => b => console.log(`The ${b} ${a}`)
shit('happy')('user')
[\code]
Your code is so badly written it hurts to read it. Try actually learning the language before you post here.
You need to define inputElement before referring to it in your JS. So, for example, add a line like:
var inputElement = document.getElementById('mood');
before the rest of the JS.
Ok, it works. But how can I style the background-color of the entire page?
>all of those br tags
Just set style to `document.body` instead of that element.
Thank you so much!!!!
This is it so far: findyourcolor.neocities.org
Is there a way I can ignore the capitalization of the input so it's not case sensitive?
Just use String.prototype.toLowerCase() to turn the entire string lowercase before you check if it matches.
developer.mozilla.org
don't listen to them:
except:
It's retarded, just have a function that takes multiple arguments and curry them out if you need partial application.
You're clearly not writing a function that creates callback closures so it's a waste that makes code less readable.
I fixed it anyways
just use jquery