CODEWITHSUNDEEP
javascripthtmljquery
CELO7
CELO7

Reputation: 23

Jquery .css() not working (possibly caused by something else)

I'm trying to insert some CSS rules with JavaScript and jQuery for a form.
Unfortunately it doesn't work. On click of whatever input I want to do some checking on all the inputs with the same "name" and apply or remove classes or CSS rules. Here's my Html:

<input type="text" class="form-control form-control-lg form-style input1" name="input-class" value="" placeholder="John">
<label class="form-label-input form-label-input-1">Name:</label>

<input type="text" class="form-control form-control-lg form-style input2" name="input-class" value="" placeholder="Doe">
<label class="form-label-input form-label-input-2">Surname:</label>

<input type="text" class="form-control form-control-lg form-style input3" name="input-class" value="" placeholder="Passions">
<label class="form-label-input form-label-input-3">Passions:</label>

Here's my script with some explanations:

    //On Click of all the elements with name="input-class"        
    document.querySelectorAll('input[name="input-class"]').forEach(item => {
        item.addEventListener('click', event => {
            
            //Get all Inputs in a Static NodeList
            const inputer = document.querySelectorAll('input[name="input-class"]');
            
            //Convert the List into an Array
            var btnsArri = Array.from(inputer);
            
            
            //Loops through all the array on inputs
            var i;
            for (i = 0; i < btnsArri.length; i++) {
                
                if(btnsArri[i] === document.activeElement){
                    
                    if(btnsArri[i].value === ""){
                        console.log(i + ' is empty and selected')
                        //Recreate the name of the class
                        j = 1
                        h = j + i;

                        var label = 'form-label-input-' + h;
                        var inputChanger = $(btnsArri[i]).attr('class').split(' ')[3];

                        console.log(label)
                        
                        //add CSS Rule
                        //------------------------THAT'S WHERE I'M STUCK..--------------------
                       setTimeout(function(){ $(inputChanger).css({"width":"105%"})}, 0);
                        setTimeout(function(){ $(label).css({"font-size":".6rem"})}, 0);
                    }
                    
                    if(btnsArri[i].value !== ""){
                        console.log(i + ' is full and selected')
                    }
                    
                }
                
                if(btnsArri[i] !== document.activeElement){
                    if(btnsArri[i].value === ""){
                        console.log(i + ' is empty')
                    }
                    if(btnsArri[i].value !== ""){
                        console.log(i + ' is full')
                    }
                }
                
            }
            
            
        }) 
    })

The code is working just fine it's just the part setTimeout(function(){ $(inputChanger).css({"width":"105%"})}, 0); setTimeout(function(){ $(label).css({"font-size":".6rem"})}, 0); that doesn't work. Worst it's not returning any error So i'm a bit lost.

Upvotes: 2

Views: 108

Answers (4)

Carsten Massmann
Carsten Massmann

Reputation: 28196

I know this question already has a solution. It fixed the problem of OP. But as jQuery was used in this snippet I would like to point out that it could do so much more for you, and that with writing less code:

$('input[name=input-class]').each(function(i){
  $(this).click(function(){
    console.log((i+1)+' entry, '+(this.value.length?'filled.':'empty so far.'));
    $(this).css('width','90%').next().css('font-size','.6em')
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control form-control-lg form-style input1" name="input-class" value="" placeholder="John">
<label class="form-label-input form-label-input-1">Name:</label>

<input type="text" class="form-control form-control-lg form-style input2" name="input-class" value="" placeholder="Doe">
<label class="form-label-input form-label-input-2">Surname:</label>

<input type="text" class="form-control form-control-lg form-style input3" name="input-class" value="" placeholder="Passions">
<label class="form-label-input form-label-input-3">Passions:</label>

Upvotes: 1

Shikamu
Shikamu

Reputation: 381

I think the selectors are wrong, you seem to be using jquery and are trying to access the items by class name, the code should be like this:

setTimeout(function(){ $('.'+inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $('.'+label).css({"font-size":".6rem"})}, 0);

It seems that you've decided to use unique class names for this purpose but you could also use your input1, input2, and input3 as unique IDs of your input elements in which case you would then access them through $('#'+theId)

Upvotes: 2

Bhautik
Bhautik

Reputation: 11282

I think you are missing . here. You need to access the items by class name. check below snippet.

//On Click of all the elements with name="input-class"        
    document.querySelectorAll('input[name="input-class"]').forEach(item => {
        item.addEventListener('click', event => {
            
            //Get all Inputs in a Static NodeList
            const inputer = document.querySelectorAll('input[name="input-class"]');
            
            //Convert the List into an Array
            var btnsArri = Array.from(inputer);
            
            
            //Loops through all the array on inputs
            var i;
            for (i = 0; i < btnsArri.length; i++) {
                
                if(btnsArri[i] === document.activeElement){
                    
                    if(btnsArri[i].value === ""){
                        console.log(i + ' is empty and selected')
                        //Recreate the name of the class
                        j = 1
                        h = j + i;

                        var label = 'form-label-input-' + h;
                        var inputChanger = $(btnsArri[i]).attr('class').split(' ')[3];

                        console.log(label)
                        
                        //add CSS Rule
                        //------------------------THAT'S WHERE I'M STUCK..--------------------
                       setTimeout(function(){ $('.'+inputChanger).css({"width":"105%"})}, 0);
                        setTimeout(function(){ $('.'+label).css({"font-size":".6rem"})}, 0);
                    }
                    
                    if(btnsArri[i].value !== ""){
                        console.log(i + ' is full and selected')
                    }
                    
                }
                
                if(btnsArri[i] !== document.activeElement){
                    if(btnsArri[i].value === ""){
                        console.log(i + ' is empty')
                    }
                    if(btnsArri[i].value !== ""){
                        console.log(i + ' is full')
                    }
                }
                
            }
            
            
        }) 
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control form-control-lg form-style input1" name="input-class" value="" placeholder="John">
<label class="form-label-input form-label-input-1">Name:</label>

<input type="text" class="form-control form-control-lg form-style input2" name="input-class" value="" placeholder="Doe">
<label class="form-label-input form-label-input-2">Surname:</label>

<input type="text" class="form-control form-control-lg form-style input3" name="input-class" value="" placeholder="Passions">
<label class="form-label-input form-label-input-3">Passions:</label>

Upvotes: 1

Twisty
Twisty

Reputation: 30893

Based on your code:

var label = 'form-label-input-' + h;
var inputChanger = $(btnsArri[i]).attr('class').split(' ')[3];
console.log(label)
//add CSS Rule
//------------------------THAT'S WHERE I'M STUCK..--------------------
setTimeout(function(){ $(inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $(label).css({"font-size":".6rem"})}, 0);

This will fail due to an improper selector. You set label to a String value: form-label-input-2. I am assuming this should be a Class name. So the the proper format for a Class Selector will include a ., like so:

$(".form-label-input-2").css("font-size", ".6rem");

I would advise you use the following:

var label = '.form-label-input-' + h;

I would also advise not using setTimeout, there is no benefit.

var label = '.form-label-input-' + h;
var inputChanger = $(btnsArri[i]).attr('class').split(' ')[3];
console.log(label);
$(inputChanger).css("width", "105%");
$(label).css("font-size", ".6rem"});

You also don't need to use Objects to set one Style Rule. Best to use them for multiple rule changes at once.

Upvotes: 1

Related Questions