This is not a duplicate, because the value of the input is changed by a function, not by user input.
Is it possible to call a function if the value of the attribute of an element has changed?
E.g. I use an input text with the id color and a button which opens a color picker. If I select a color then the color value is written into the input text with id color.
I try to detect if the value of the input text with id color has changed and call a function which sets the background-color of my input text to the selected color.
My attempt:
$("input#color").on
(
"change",
function()
{
console.log("SOMETHING HAS CHANGED");
var color = $("input#color").val();
$("input#color").css("background-color", color);
}
);
But SOMETHING HAS CHANGED is never shown.
I know I could solve this by using timers, but I think there must be a better solution.
Related
I have a form, and want to change the background color of the submit button whenever all form inputs are filled out. I've started testing this with just 1 input field, but the button color doesn't change in real time as I add content to the input. How can I adjust my code so that as soon as I type anything in the input box, it recognizes it and changes the button color in real time?
jQuery(function($){
var teamname = $('#acff-post-acfef_2207cc4_title').val();
if(teamname !== ''){
$('.acff-submit-button').css('background-color', 'red');
}
});
You have to listen to change event on the input field in order to check the value every time it changes. What you are doing right now is checking the value of the field when the page loads.
jQuery(function($){
$('#acff-post-acfef_2207cc4_title').change(() => {
if ($(this).val() !== '') { // check input value
$('.acff-submit-button').css('background-color', 'red');
}
})
});
I have wrapped my input field of type 'color' in a label tag to get control over the styling of the input field as nicely suggested in one of the proposed solutions here.
So I have something like:
"<label class='myLabel1'><input type='color' class='myColor1' value='#ffffff'></input></label>
It works as expected. However, if I try to change the color as in:
$('.myColor1').val('#FF0000');
It does not change the color of the input field.
Try these methods.
1. $('.myColor1').attr('value', '#FF0000');
2. $('.myColor1').prop('value', '#FF0000');
JS:
3. var elem = document.querySelector('.myColor1');
elem.setAttribute('value', '#FF0000');
Code should not work because when label is used to fake the input field, the label's CSS should be updated through Javascript and not the input field's color. Label color change also changes the input field's color but not vice versa.
I'm setting up a system that tracks submissions from my employees in Google Sheets. Each day I check to see if they have submitted the proper paperwork. What I am wanting to accomplish is, when I click (or select) a cell with that employee's name, I want to change the background color when I click (or select) that cell.
Nothing I've tried has worked.
var color = [
["#06c646"]
];
var cell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell();
cell.setBackground(color);
Nothing seems to be doing what I want it to do.
You could try it with jQuery:
$(selector).on("click", function() { // add cell's class/id here
$(this).css({'background-color':'blue'});
});
I have a quick question concerning JavaScript and CSS.
I'd like to have a popup box that allows you to enter a color (any main primary color that is recognized by CSS). After the user enters a color, I'd like it to alter the body element inside my external stylesheet to change the background color of the page. I know that I will need to use a combination of these attributes within CSS but I am not sure the syntax of how to relate it to the external CSS and the correct way to combine here.
From W3Schools:
function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
Also from W3Schools:
onclick="this.parentElement.style.display='none';"
Now, my main question I suppose is how to take the part where it says "display='none';" to actually take the input of the popup box and insert it in the onclick to achieve my goal (would it be something like this.parentElement.style.backgroundcolor='" + usercolorinput + "';")
Thanks in advance.
Here is how I would do it.
Change color on user input
function changeColor(element) {
document.body.style.backgroundColor = element.value;
}
<h4> Type #333, or pink below </h4>
<input oninput="changeColor(this)"/>
How it works:
The <input-element> can fire a number of events, based on your input. In this case I've used the oninput event, which is triggered every time you type something in the <input>, to call a function, called changeColor.
The input also sends the element itself when calling the function, as an argument. Therefore in my changeColor function, I have access to the element that triggered it.
Inside the function, I read the value of the input and then select the body of the page and set it's backgroundColor as the value of the input.
Or using a button
Or you can use a button, like you asked.
function changeColor() {
// get the input element value
var inputValue = document.getElementById("colorInput").value;
// apply the value as a backgroundColor on body
document.body.style.backgroundColor = inputValue;
}
<h4> Type #333, or pink below and press "Change color" </h4>
<input id="colorInput"/>
<button onclick="changeColor()"> Change color </button>
How it works:
In this case changeColor function is called by the button click.
Inside that function we get the value of the input, by getting the input via it's id attribute and reading it's value.
Then I use that value to apply backgroundColor to the body as I did in the above example
First create your function which return the display value after on click event.
function changeDisplay{
var value="block";
return value;
}
Then call it in click function
onclick="this.parentElement.style.display=changeDisplay()";
Note:- the way to change the background color at concept it is the same but you need to add this function to another event like text change in input text or select option from select box or the way you want in your script or web page
I'm using a fake select box in my script which means the original select box is hidden and for styling purposes a ul is showing up. Whenever the selected value of this list changes the orginal select box does too.
There is a change function for that. Within that function is following code:
var el = $(e.currentTarget) ;
$('#my_select_box').children().removeAttr('selected');
$('#my_select_box option[value="'+el.attr('data-value')+'"]').attr('selected','selected');
After that change I want to retrieve the new selected value of the original select box in another function.
But the normal selector only gets the original value, not the new:
$('#my_select_box option:selected').val() //returns the wrong value
So how to I get the new value in the function I need it?
I tried this function:
$("#my_select_box").bind("DOMSubtreeModified", function() {
console.log($(this).find('option:selected').val());
});
It returns the correct value but not where I need it. So how can I retrieve the correct select box value out of the domtree live?
Thanks in advance!
instead of .attr('selected','selected');, try .prop('selected', true);