我在下面添加了整个代码,但最重要的部分(至少我认为是这样)在下面:
<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>
和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);
我尝试实现的目的是仅在检查输入#toSelected时显示div #inputSelectedDiv ...我做错了什么?
以下是整个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>
和整个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();
};
答案 0 :(得分:1)
这对你有用。我已经为你更新了HTML和JS。在http://jsfiddle.net/gybwv4r4/1/处尝试(定义的.hidden
类只是为了通过添加背景颜色向您展示它的工作原理。您可以将CSS更改为以下内容:)
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);
答案 1 :(得分:0)
好的,这就是你要找的答案,
<强> 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" style="display:none;" class="inputSelectedDiv">
<p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
</div>
</fieldset>
<input type="button" value="Oblicz" id="calculateDifference">
</form>
</div>
<强> JS 强>
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('toToday').addEventListener('click',function(e){
document.getElementById('inputSelectedDiv').style.display = 'block';
});
document.getElementById('toSelected').addEventListener('click',function(e){
document.getElementById('inputSelectedDiv').style.display = 'block';
});
不要忘记接受并投票回答如果有效,它会帮助其他用户。
答案 2 :(得分:0)
<div id="targetedArea" onClick="checkelement()">
<input id="d" type="radio" />
</div>
<script type="text/javascript">
function checkelement(){
var trigerA = document.getElementById("d");
if(trigerA.checked){
var targetA = document.getElementById("targetedArea");
targetA.style.display = 'none';
}else{
}
}
</script>