How to change css styles using jQuery with values from <input> elements

Question

I'm making a program where user can select an element to render and also select CSS styles to add to the element.

The program successfully renders un-altered elements. The difficulty is changing the styles. So far i'm only changning Width and Height. ! I won't use .width()/.height() methods because I want to include units and change others CSS properties.

I get this error: Uncaught TypeError: latestElement.css is not a function

This tells me that .css() doesn't seem to work with jQuery prototype.

 HTML:
```
<section id="form">
<!-- select element --->
<label for="container"> Please select type of container to add</label>
<select id= "container">
 <option value= "div" > &ltdiv&gt </option>
 <option value= "p"> &ltp&gt </option>
 <option value= "section"> &ltsection&gt </option>

</select>

<button id="btn" > Create Container </button>
</section>

<!-- Seperate container to hold now elements -->


<div id="layout_demo">

</div>

```

To avoid assigning a new id attribute to every knew element I select them using the list of each element (i.e $('element')[i]). I store that reference in a variable but it breaks .css().

      <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>

    <script>
    $(document).ready( function(){

         // event-handler to create new element
        function createContainer() {

        // variables store values from <select> element
        var selector = $('select');
        var elementType = $('select').val();

        // string containing markup for use with .append()
        var elementTypeStr = "<" + elementType + "> This is a " + elementType + 
                              "</" + elementType + ">" ;

            $('#layout_demo').append( elementTypeStr );
            // create jQuery prototype for prototype.css()
             i = $( elementType ).length;
               latestElement = $(elementType)[i - 1];
            latestElement.css( "width", function(){
                return width + widthUnit ;
            });

        } // end createContainer()

        // ---------------------------- event handlers ---------------------

        $('#btn').click( createContainer );
        // button to delete latest element or selected element

    }); // end ready

  </script>

Also size() is deprecated and has actually been removed from jQuery 3. Ensure you're using an up to date version of jQuery. — Rory McCrossan
– Rory McCrossan, Commented May 24, 2019 at 19:17
This is not a Minimal, Complete, Reproducible Example! - Please show the code that wires all this together - because that is where your problem lies. — Randy Casburn
– Randy Casburn, Commented May 24, 2019 at 19:32
Valid indexes go from 0 to i-1. $(containType)[i] is outside the array, so it returns undefined. — Barmar
– Barmar, Commented May 24, 2019 at 19:52

Deepak Dixit · Accepted Answer · 2019-05-28 05:57:05Z

1

No need to fetch last item, do like this :-

$(document).ready( function(){

  function createContainer() {
    var selector = $('select');
    var el = $('select').val();
    var elementType = $(`<${el}> This is ${el} </${el}>`) ;
    $('#layout_demo').append( elementType );
    elementType.css( "border", '1px solid red');
  }
  $('#btn').click( createContainer );

});

edited May 28, 2019 at 5:57

answered May 28, 2019 at 5:23

Deepak Dixit

1,6201 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebastian lavenant Over a year ago

Hello, This helped very much. I know learned about Template Literals and they make things much easier.

Collectives™ on Stack Overflow

How to change css styles using jQuery with values from <input> elements

This tells me that .css() doesn't seem to work with jQuery prototype.

To avoid assigning a new id attribute to every knew element I select them using the list of each element (i.e $('element')[i]). I store that reference in a variable but it breaks .css().

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This tells me that .css() doesn't seem to work with jQuery prototype.

To avoid assigning a new id attribute to every knew element I select them using the list of each element (i.e $('element')[i]). I store that reference in a variable but it breaks .css().

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related