Javascript for Hide and Show an Element

To create a JavaScript code that uses a form select input to hide or show a textarea input, you can follow these steps: 

 1. **Create the HTML Form**: This includes a `<select>` input and a `<textarea>` input. 2. **Add JavaScript**: Write a script to handle the change event of the select input and toggle the visibility of the textarea. 

 Here's an example: 

 ### HTML 

 <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Show/Hide Textarea</title>

 <style>

 #myTextarea {

 display: none;

 }

 </style>

</head>

<body>

 <form id="myForm">

 <label for="mySelect">Choose an option:</label>

 <select id="mySelect" name="options">

 <option value="none">None</option>

 <option value="show">Show Textarea</option>

 <option value="hide">Hide Textarea</option>

 </select>

 <textarea id="myTextarea" name="text"></textarea>

 </form>

 <script>

 document.getElementById('mySelect').addEventListener('change', function() {

 var textarea = document.getElementById('myTextarea');

 if (this.value === 'show') {

 textarea.style.display = 'block';

 } else {

 textarea.style.display = 'none';

 }

 });

 </script>

</body>

</html>

 

 ### Explanation 

 1. **HTML Structure**:    - The `<select>` element has options: "None", "Show Textarea", and "Hide Textarea".    - The `<textarea>` element is initially hidden using CSS (`display: none`). 

 2. **JavaScript**:    - An event listener is added to the select element to listen for changes.    - When the select value changes, the script checks the value:      - If the value is "show", the textarea is displayed (`display: block`).      - For any other value (including "none" and "hide"), the textarea is hidden (`display: none`). 

 You can further customize this code according to your requirements, such as adding more options, styling, or additional form elements.