If you want to show the input field immediately when the page loads and then toggle the visibility based on the dropdown selection, you can modify the script accordingly:
Show/Hide Fields
```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 Fields</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Show the input field initially
toggleFields();
// Add onchange event listener to the dropdown
document.getElementById("selectField").addEventListener("change", toggleFields);
});
function toggleFields() {
var dropdown = document.getElementById("selectField");
var inputField = document.getElementById("inputField");
// Check the dropdown value
if (dropdown.value === "show") {
inputField.style.display = "block";
} else {
inputField.style.display = "none";
}
}
</script>
</head>
<body>
<label for="selectField">Select:</label>
<select id="selectField">
<option value="hide">Hide Field</option>
<option value="show">Show Field</option>
</select>
<div id="inputField">
<label for="textField">Input Field:</label>
<input type="text" id="textField" name="textField">
</div>
</body>
</html>
```
This modification includes an event listener for the `DOMContentLoaded` event, which triggers the `toggleFields()` function initially when the page loads. Subsequently, the `change` event listener is added to the dropdown to handle changes in the dropdown selection and toggle the visibility of the input field accordingly.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me