香草JS ForEach元素与升序变量赋值
香草JS ForEach元素与升序变量赋值
提问于 2020-07-10 08:00:01
我试着用Vanilla JS做一个简单的一个月日历。我读到PHP可以用来创建多个重复元素，但我想知道是否可以这样做，我正在尝试。我正在创建按钮，并使用for循环来使其中的31个按钮填满我的月份。我也在尝试做它，所以按钮包含使用变量day的天数。我不知道如何做到这一点，我在考虑循环，并使用i作为day的值，但最后一个i值就会结束。
因为它不起作用，我来这里是为了寻求帮助，如果可能的话，我想用Vanilla JS解决这个问题。谢谢。
TLDR: For循环以生成按钮，变量为每个按钮分配升序值。
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
var day;
function dateMaker() {
for (i = 0; i < 31; i++) {
var btn = document.createElement("button");
btn.className("date");
btn.innerHTML = day;
document.body.appendChild(btn);
}
}
</script>
</head>
<body>
<h1>July 2020</h1>
<div id="calendar">
<script>
dateMaker();
</script>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-10 08:06:02
您需要添加使用classList.add将类添加到动态元素。几个错误和修正，我在下面有很高的说明
- 此外，理想情况下使用.textContent整数的
.innerHTML - 您可以在日历中appendChild并显示您的天数。
- 使用classList向动态元素添加类
- 您正在声明
day变量，但没有在代码中使用它。
在下面运行片段。
function dateMaker() {
for (i = 1; i < 31; i++) {
var btn = document.createElement("button");
btn.classList.add("date");
btn.textContent = i;
document.getElementById('calendar').appendChild(btn) ;
}
}
dateMaker();<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
var day;
</script>
</head>
<body>
<h1>July 2020</h1>
<div id="calendar"></div>
<script>
</script>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62829741
复制相关文章
相似问题
腾讯云开发者
