I'm facing an issue with toggling the class of a <span> when a radio button is clicked.
<html>
<head></head>
<style type="text/css">
.eHide
{
display:none;
}
</style>
<script type="text/javascript">
function change()
{
var NAME = document.getElementById("return");
var currentClass = NAME.className;
if (currentClass == "eHide") { // Check the current class name
NAME.className = ""; // Set other class name
} else {
NAME.className = "eHide"; // Otherwise, use `second_name`
}
}
function disp()
{
document.getElementById("spanfrom").innerHTML = document.getElementById("from").value;
document.getElementById("spanto").innerHTML = document.getElementById("to").value;
document.getElementById("spandate").innerHTML = document.getElementById("departure").value;
}
</script>
<body>
<div style="width: 1000px">
<div id="innerWrapper" style="position:relative;left:50px;top:20px;">
<div>
From: <input type="text" id="from" placeholder="Source"/>
<span style="float:right">To: <input type="text" id="to" placeholder="Destination"/></span>
</div>
<div>
Depart Date: <input type="text" id="departure" placeholder="Departure"/>
<span style="float:right">Return: <input type="text" id="return" placeholder="Return"/></span>
</div>
<div id="control">
<input type="radio" name="radio" value="oneWayRadio" onClick="change();"> One Way
<input type="radio" name="radio" value="returnRadio" checked onClick="change();"> Return
<button value="Submit" onClick="disp()" type="submit">Submit</button>
</div>
<div class="text">You are going from <span id="spanfrom"></span> to <span id="spanto"></span> on <span id="spandate"></span></div>
</div>
</div>
</body>
</html>
This code snippet presents a ticket reservation form challenge involving two radio buttons: "One Way" and "Return". Clicking "One Way" successfully hides the <input> tag with id="return", yet the surrounding <span> enclosing the word "Return" remains visible. Although using id="return" directly on the <span> instead of the <input> could resolve this, such modification is not permissible in this case.
A potential resolution entails adjusting the change() function to target the span element rather than the input by ID "return". It's crucial to rely solely on pure JavaScript as JQuery is restricted in usage for this specific scenario.