I have a JavaScript code that allows users to input text and choose to make it bold, italicized, or underlined. For example, if the user checks the bold option, the text will appear in bold format. Here is the JavaScript code I am using:
$('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>I encountered an error while trying to apply these styles to my text. It seems like the JavaScript code only works for input fields but not for textarea elements. Is there a way to modify the code so it can work with both? I want the large blank area to accept user input and display it as bold, italicized, or underlined. Thank you!