英文:
How do I dynamically update a <p> element when a date is selected from an input type="date"?
问题
I have a paragraph element that I'd like to dynamically update to display whatever the date selected from my input type="date" element is:
<input type="date" id="datepicker" name="date" required>
<p id='testVariable3'></p>
So far I've tried this, but it doesn't update:
<div>
<h4 style="padding: 5px">Select a date</h4>
</div>
<input type="date" id="datepicker" name="date" required />
<script>
var currentDate = new Date().toISOString().split("T")[0];
document.getElementById("datepicker").min = currentDate;
</script>
<p id="testVariable1"></p>
<p id="testVariable2"></p>
<p id="testVariable3"></p>
<div>
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
<script>
const hotdeskLinks = document.querySelectorAll(".test a");
var allBookings = "{{all-bookings}}";
var decodedBookings = allBookings.replace(/"/g, '"');
const test1 = document.getElementById("testVariable1");
const workspaceAttributes = JSON.parse(decodedBookings).map(
(decodedBookings) => decodedBookings.workspace
);
test1.textContent = workspaceAttributes;
const test2 = document.getElementById("testVariable2");
const dateAttributes = JSON.parse(decodedBookings).map(
(decodedBookings) => decodedBookings.date
);
test2.textContent = dateAttributes;
const datepicker = document.getElementById("datepicker");
const test3 = document.getElementById("testVariable3");
datepicker.addEventListener("change", function (event) {
const selectedDate = datepicker.value;
test3.textContent = selectedDate;
});
</script>
英文:
I have a paragraph element that I'd like to dynamically update to display whatever the date selected from my input type="date" element is:
<input type="date" id="datepicker" name="date" required>
<p id='testVariable3'></p>
So far I've tried this, but it doesn't update:
<div>
<h4 style="padding: 5px">Select a date</h4>
</div>
<input type="date" id="datepicker" name="date" required />
<script>
var currentDate = new Date().toISOString().split("T")[0];
document.getElementById("datepicker").min = currentDate;
</script>
<p id="testVariable1"></p>
<p id="testVariable2"></p>
<p id="testVariable3"></p>
<div>
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
<script>
const hotdeskLinks = document.querySelectorAll(".test a");
var allBookings = "{{all-bookings}}";
var decodedBookings = allBookings.replace(/&quot;/g, '"');
const test1 = document.getElementById("testVariable1");
const workspaceAttributes = JSON.parse(decodedBookings).map(
(decodedBookings) => decodedBookings.workspace
);
test1.textContent = workspaceAttributes;
const test2 = document.getElementById("testVariable2");
const dateAttributes = JSON.parse(decodedBookings).map(
(decodedBookings) => decodedBookings.date
);
test2.textContent = dateAttributes;
const datepicker = document.getElementById("datepicker");
const test3 = document.getElementById("testVariable3");
datepicker.addEventListener("change", function (event) {
const selectedDate1 = datepicker.value;
test3.textContent = selectedDate;
});
</script>
答案1
得分: 2
你的脚本底部似乎有一个小拼写错误。这是你的代码：
datepicker.addEventListener('change', function(event) {
const selectedDate1 = datepicker.value;
test3.textContent = selectedDate;
你在事件监听器函数中声明了 selectedDate1，然后尝试将 selectedDate 赋值给 test3.textContent。
看看修改这个拼写错误是否可以解决你的问题。
英文:
It looks like you have a small typo at the bottom of your script. This is your code:
datepicker.addEventListener('change', function(event) {
const selectedDate1 = datepicker.value;
test3.textContent = selectedDate;
You declared selectedDate1 in your event listener function and then tried to assign selectedDate to test3.textContent
See if changing this typo can fix your issue.
答案2
得分: 0
你的代码可以工作！只需确保在HTML代码中，在创建input和p元素之后加载脚本。
像这样：
<body>
<input type="date" id="datepicker" name="date" required>
<p id='dynamicDate'></p>
<script>
const datepicker = document.getElementById('datepicker');
const test = document.getElementById('dynamicDate');
datepicker.addEventListener('change', function(event) {
const selectedDate = datepicker.value;
test.textContent = selectedDate;
});
</script>
</body>
在你的代码中，你可以这样做：
<div>
<h4 style="padding: 5px; ">选择日期</h4>
</div>
<input type="date" id="datepicker" name="date" required>
<script>
var currentDate = new Date().toISOString().split("T")[0];
document.getElementById("datepicker").min = currentDate;
</script>
<p id='testVariable1'></p>
<p id='testVariable2'></p>
<p id='testVariable3'></p>
<div>
<input type="submit" value="提交" class="btn btn-primary">
</div>
<script>
// 将这段代码从第二个脚本标签中分离出来
const datepicker = document.getElementById('datepicker');
const test3 = document.getElementById('testVariable3');
datepicker.addEventListener('change', function (event) {
const selectedDate = datepicker.value;
test3.textContent = selectedDate;
});
</script>
<script>
const hotdeskLinks = document.querySelectorAll('.test a');
var allBookings = '{{all-bookings}}';
var decodedBookings = allBookings.replace(/&quot;/g, '"');
const test1 = document.getElementById('testVariable1');
const workspaceAttributes = JSON.parse(decodedBookings).map((decodedBookings) => decodedBookings.workspace);
test1.textContent = workspaceAttributes;
const test2 = document.getElementById('testVariable2');
const dateAttributes = JSON.parse(decodedBookings).map((decodedBookings) =>
decodedBookings.date);
test2.textContent = dateAttributes;
// 原本在这里
</script>
这里我只是将第二个脚本标签分成两部分，以便单独运行！(还有一个小错别字！)
希望这有所帮助 
英文:
Your code works! You just have to make sure that in the HTML code, you're loading the script after you create the input and p elements in the body.
Something like this:
<body>
<input type="date" id="datepicker" name="date" required>
<p id='dynamicDate'></p>
<script>
const datepicker = document.getElementById('datepicker');
const test = document.getElementById('dynamicDate');
datepicker.addEventListener('change', function(event) {
const selectedDate = datepicker.value;
test.textContent = selectedDate;
});
</script>
</body>
To do this in your code, you can do it like this:
<div>
<h4 style="padding: 5px; ">Select a date</h4>
</div>
<input type="date" id="datepicker" name="date" required>
<script>
var currentDate = new Date().toISOString().split("T")[0];
document.getElementById("datepicker").min = currentDate;
</script>
<p id='testVariable1'></p>
<p id='testVariable2'></p>
<p id='testVariable3'></p>
<div>
<input type="submit" value="Submit" class="btn btn-primary">
</div>
<script>
// Moved this code out of the second script tag
const datepicker = document.getElementById('datepicker');
const test3 = document.getElementById('testVariable3');
datepicker.addEventListener('change', function (event) {
const selectedDate = datepicker.value;
test3.textContent = selectedDate;
});
</script>
<script>
const hotdeskLinks = document.querySelectorAll('.test a');
var allBookings = '{{all-bookings}}';
var decodedBookings = allBookings.replace(/&quot;/g, '"');
const test1 = document.getElementById('testVariable1');
const workspaceAttributes = JSON.parse(decodedBookings).map((decodedBookings) => decodedBookings.workspace);
test1.textContent = workspaceAttributes;
const test2 = document.getElementById('testVariable2');
const dateAttributes = JSON.parse(decodedBookings).map((decodedBookings) =>
decodedBookings.date);
test2.textContent = dateAttributes;
// Originally here
</script>
All I've done here is separated the second script tag into 2 so that it runs separately! (Also a small typo!)
Hope this helped
答案3
得分: 0
没有问题的代码。但是，重要的是要知道“change”监听器只会在填写完日期的所有组件（例如月份、年份和日期）之后才会触发。
英文:
There's nothing wrong with your code. However, it's important to know that the "change" listener will only be triggered after filling out all of the components of the date (e.g. month, year, and day).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论