Search code examples
javascripthtmlradio-button

if radio button checked display div

I have added whole code below, but the most important parts (at least I think so) are beneath:

<div id="daysPassed">
<h2>Ile pełnych dni minęło?</h2>
<form id="daysPassedForm">
    <label for="firstDateDP">Data początkowa:</label>
    <input type="text" id="firstDate">
    <fieldset>
        <input type="radio" id="toToday" name="todayOrSelected">    
        <label for="toToday">Do dziś</label>

        <input type="radio" id="toSelected" name="todayOrSelected"> 
        <label for="toSelected">Do wskazanej daty</label> 
        <div id="inputSelectedDiv" class="inputSelectedDiv">
            <p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
        </div> 

    </fieldset>
    <input type="button" value="Oblicz" id="calculateDifference">
    </form>
</div>

and javascript:

function toggleDateSelection () {
for (i = 0; i <= document.getElementsByName("todayOrSelected").length; i++) {
    if (document.getElementsByName("todayOrSelected")[1].checked) {
        if (document.getElementById("inputSelectedDiv").classList.contains("hidden")) {
            document.getElementById("inputSelectedDiv").classList.remove("hidden");
        }
    } else if (document.getElementsByName("todayOrSelected")[0].checked) {
        document.getElementById("inputSelectedDiv").classList.remove("hidden");
    }
}   
}
document.getElementById("toSelected").addEventListener("click", toggleDateSelection, false);
document.getElementById("toToday").addEventListener("click", toggleDateSelection, false);

What I'm trying to do achieve is displaying div#inputSelectedDiv only when input#toSelected is checked... What am I doing wrong?

Here's whole HTML:

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>

<body>
<h1>Kalkulator dat</h1>
<p>Wszystkie daty wprowadzaj w formacie mm/dd/yyyy</p>
<div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id="daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="text" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected">    
            <label for="toToday">Do dziś</label>

            <input type="radio" id="toSelected" name="todayOrSelected"> 
            <label for="toSelected">Do wskazanej daty</label> 
            <div id="inputSelectedDiv" class="inputSelectedDiv">
                <p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
            </div> 

        </fieldset>
        <input type="button" value="Oblicz" id="calculateDifference">
        </form>
</div>

<div id="daysPassedResult" class="result">
    <p id="daysPassedInfo"></p>
</div>

<div id="dateIndicate">
    <h2>Jaka będzie data?</h2>
    <form id="dateIndicateForm">
        <ul>
            <li>
                <label for="firstDateDI"><span>Data początkowa:</span></label>
                <input type="text" id="firstDateDI">
            </li>

            <li>
            <label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
            <input type="number" id="numberOfDays" step="1">
            </li>

            <li>
            <input type="submit" value="Oblicz">
            </li>
        </ul>
    </form>
</div>

<div id="dateIndicateResult" class="result">
    <p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>

<script src="script.js"></script>
</body>
</html>

and whole JS:

var beginningDateDP;
var dateDifferenceDP;
var todayOrSelected;

function calculateDaysPassed() {
    beginningDateDP = new Date(document.getElementById("firstDate").value);
    var today = new Date();
    dateDifferenceDP = Math.abs(today - beginningDateDP);
    document.getElementById("daysPassedInfo").innerHTML = "Od wskazanej daty do dziś minęło " + Math.floor(dateDifferenceDP / 1000 / 3600 / 24) + " dni.";
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.add("daysPassedResultAppearance");
}

function toggleDateSelection () {
    for (i = 0; i <= document.getElementsByName("todayOrSelected").length; i++) {
        if (document.getElementsByName("todayOrSelected")[1].checked) {
            if (document.getElementById("inputSelectedDiv").classList.contains("hidden")) {
                document.getElementById("inputSelectedDiv").classList.remove("hidden");
            }
        } else if (document.getElementsByName("todayOrSelected")[0].checked) {
            document.getElementById("inputSelectedDiv").classList.remove("hidden");
        }
    }   
}

document.getElementById("calculateDifference").addEventListener("click", calculateDaysPassed, false);
document.getElementById("toSelected").addEventListener("click", toggleDateSelection, false);
document.getElementById("toToday").addEventListener("click", toggleDateSelection, false);

function preparePage() {
//hide all unnecessary elements
    document.getElementById("inputSelectedDiv").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("dateIndicateResult").classList.toggle("hidden");
}

window.onload = function () {
    preparePage();
};
Solution

  • This will work for you. I've updated the HTML and the JS for ya. Try it at http://jsfiddle.net/gybwv4r4/1/ (the .hidden class defined there is just to show you that it's working, by adding a background color. You can change that CSS to be the following:)

    CSS: 

    .hidden {
    display:none;
}

    HTML:

    <div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id="daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="text" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected" />    
            <label for="toToday">Do dziś</label>

            <input type="radio" id="toSelected" name="todayOrSelected" /> 
            <label for="toSelected">Do wskazanej daty</label> 
            <div id="inputSelectedDiv" class="inputSelectedDiv">
                <p id="inputSelected">
                    (<input type="text" id="selectedEndDate" />)
                </p>
            </div>
        </fieldset>
        <input type="button" value="Oblicz" id="calculateDifference" />
    </form>
</div>

    JS:

    var tos = document.getElementsByName("todayOrSelected");
function toggleDateSelection () {
    var isd = document.getElementById("inputSelectedDiv");
    if (this.id === 'toToday') {
        isd.classList.add('hidden');
    }
    else if (this.id === 'toSelected') {
        isd.classList.remove('hidden');
    }
}
tos[0].addEventListener("click", toggleDateSelection, false);
tos[1].addEventListener("click", toggleDateSelection, false);