How to let JS code allow both input and textarea

I have some JS code that will turn my code bold, italicized, or underlined with user input, so if the user checks bold the text will be bolded. Here is the code:

$('input[name="textStyle"]').change(function(){
        if ($(this).val() == 'bold'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
            else $('input[name="styledText"]').css('font-weight', 'normal');
        }
        else if ($(this).val() == 'italic'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
            else $('input[name="styledText"]').css('font-style', 'normal');
        }
        else if ($(this).val() == 'underline'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
            else $('input[name="styledText"]').css('text-decoration', 'none');
        }
    });

body {
    background-color: #5f5959;
    color: #000000;
}
textarea[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea[type=submit] {
  width: 100%;
  background-color: #f9f9f9;
  color: 000000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

textarea[type=submit]:hover {
  background-color: #908989;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
    Bold:<input name="textStyle" type="checkbox" value="bold"/>
    <br>
    Italic:<input name="textStyle" type="checkbox" value="italic"/>
    <br>
    Underline:<input name="textStyle" type="checkbox" value="underline"/>
</form>

<div style="margin-left: 240px; width: 1000px; height: 665px;">
    <p><center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center></p>
    <textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
    <form style="font-family: 'Poppins', sans-serif;">
        <textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
        <input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
    </form>
</div>

It is giving me an error, and it is not bolding/italicized/underlined. I think this is because the JS code is checking for input, but the tag is textarea. Is there any way I can let it accept both? I want the large area that is blank to be bolded/italicized/underlined with user input. Thanks!

Answer

First instead of $('input[name="styledText"]') you should do $('textarea[name="styledText"]'). Secondly jquery .css also accepts an object, so create an object cssProps and add default properties. Then on toggling of the check box change the value of these keys. Once it is done then at the end use .css and pass the cssProps properties

let cssProps = {
  'font-weight': '',
  'font-style': '',
  'text-decoration': ''
}

$('input[name="textStyle"]').change(function() {
  const val = $(this).val()
  if ($(this).is(':checked')) {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = 'bold';
        break;
      case 'italic':
        cssProps['font-style'] = 'italic';
        break;
      case 'underline':
        cssProps['text-decoration'] = 'underline';
        break;
    }
  } else {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = '';
        break;
      case 'italic':
        cssProps['font-style'] = '';
        break;
      case 'underline':
        cssProps['text-decoration'] = '';
        break;

    }
  }
  $('textarea[name="styledText"]').css(cssProps)
});

body {
  background-color: #5f5959;
  color: #000000;
}

textarea[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea[type=submit] {
  width: 100%;
  background-color: #f9f9f9;
  color: 000000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

textarea[type=submit]:hover {
  background-color: #908989;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
  Bold:<input name="textStyle" type="checkbox" value="bold" />
  <br> Italic:
  <input name="textStyle" type="checkbox" value="italic" />
  <br> Underline:
  <input name="textStyle" type="checkbox" value="underline" />
</form>

<div style="margin-left: 240px; width: 1000px; height: 665px;">
  <p>
    <center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center>
  </p>
  <textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
  <form style="font-family: 'Poppins', sans-serif;">
    <textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
    <input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
  </form>
</div>