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!

https://stackoverflow.com/questions/66927656/how-to-let-js-code-allow-both-input-and-textarea April 03, 2021 at 12:14PM