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.

Javascript for Hide and Show an Element

No Comments