Updating div with input value

Can someone help me please...i thought id been learning but think i was wrong.

Im trying to print out the value from a ul li option using .change()

This is my code :

$(document).ready(function() {
    $('.front-color').change(function() {
        var color = $(this).val();
        $('.color_option_hide').hide(); 
        $('#color_option').text(color);
        console.log(color);
    });
});

Works great! Other than the fact that #color_option isnt actually showing the value!

Where have i gone wrong?

1 answer

  • answered 2018-02-13 02:56 wallah

    I don't know what is the exact problem. As you experience, somethimes there is some problems that I don't know what is the exact problem. So I give you some codes for test. I hope that it will be helpful.

    1) changing $('#color_option').text(color); like follow

    $(document).ready(function() {
        $('.front-color').change(function() {
            var color = $(this).val();
            $('.color_option_hide').hide();
    
            $('#color_option').html(color);
    
            console.log(color);
        });
    }); 
    

    2) changing $('#color_option').text(color); like follow

    $(document).ready(function() {
        $('.front-color').change(function() {
            var color = $(this).val();
            $('.color_option_hide').hide();
    
            document.getElementById("color_option").innerHTML(color);
    
            console.log(color);
        });
    }); 
    

    3) Actually, if above codes, including your code, do not work, I think the selector will be a real problem. Recheck selector and tag's id. And check if the selector work well like follow.

    $(document).ready(function() {
        $('.front-color').change(function() {
            var color = $(this).val();
            $('.color_option_hide').hide();
    
            console.log(document.getElementById("color_option"));
            // or
            console.log($('#color_option').length); // if length === 0, the seletor has problem
    
            console.log(color);
        });
    });