Question

我遇到了JS问题，可能是我被卡住了，但是也许你们中的一个可以帮助我。

我有以下index.html：

    <!DOCTYPE html>
    <html lang="en">
<head>
    <title>Calendar</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/content.css">
    <link rel="stylesheet" href="stylesheets/calendar.css">
    <script
        type="application/javascript"
        src="scripts/try.js">
    </script>
    <script src="scripts/jquery-3.3.1.min.js"></script>
</head>
<body 
    onload="init()">
    <div id="content"> 
        <div class="year">
            <ul>
                <li id="year">year</li>
                <li class="prev" id="prevmonth" onclick="changeYear()">&#10094;</li>
                <li class="next" id="nextmonth" onclick="changeYear2()">&#10095;</li>
            </ul>
        </div>
        <hr>
        <div class="month">
            <ul>
                <li id="month">month</li>
                <li class="prev" id="prevyear" onclick="changeMonth()">&#10094;</li>
                <li class="next" id="prevyear" onclick="changeMonth2()">&#10095;</li>
             </ul>
        </div>
    </div>
    <div id="calendar">
        <table id="tablecalendar">
        </table>
    </div>
</body>
</html>

将加载init（）。此函数包含以下代码：

    function init() {
var months = ["January", "February", "March", "April", "May", "June", 
"July", "August", "September", "October", "November", "December"];
let monthsextension = ["nothing"];
var months2 = monthsextension.concat(months); 
today = new Date();
var month2 = today.getMonth();
var year = today.getFullYear();
document.getElementById("month").innerHTML = months[month2];
document.getElementById("year").innerHTML = year;
displayC();
}

dispayC函数，具有从年份开始向上或向下计数的两个功能：

    function changeYear(){
var year = document.getElementById("year").innerHTML;
var year = year-1;
document.getElementById("year").innerHTML = year;
}
function changeYear2(){
var year2 = document.getElementById("year").innerHTML;
console.log(year2);
console.log(year2+1);
year2 = year2+1;
console.log(year2);
document.getElementById("year").innerHTML = year2;
}

现在，函数“ changeYear”可以按我的意愿工作，但是“ changeYear2”不会将1加到年份，而是将数字加到年份。
示例：
“ 2019”变成“ 20191”
再次点击计数器箭头，它将变为“ 201911”

为什么我可以减去但不能加到年份？

希望这不是太多的代码，我会尽量减少代码。

Answer 1

-运算符将操作数强制转换为数字（不存在字符串减法），+运算符则不强制（因为字符串，+表示串联）。

console.log("7" - "2");
console.log("7" + "2");

parseInt innerHTML，它将起作用。

Answer 2

在var year2 = document.getElementById("year").innerHTML;

中

将其更改为

var year2 = parseInt(document.getElementById("year").innerHTML);

默认情况下，Year2被定义为字符串，当您将数字添加到字符串中时，只需将其添加到字符串中。您必须通过parseInt()（或parseFloat（）等）将字符串转换为数字。

Answer 3

HTML仅具有一种数据类型：字符串。当您这样做时：

var year2 = document.getElementById("year").innerHTML;

您不是在JavaScript中创建Date对象，而是在创建字符串。因此，当您执行此操作时：

console.log(year2+1);

您没有添加，您正在串联；

您需要将HTML字符串转换为日期，然后使用Date methods对其进行修改。这是一个示例：

let dateString = document.querySelector("input");
let btn = document.querySelector("button");
let output= document.querySelector("div");

btn.addEventListener("click", function(){

  // All we have at this point is a string
  console.log(dateString.value, typeof dateString.value);

  // Create new date based on string
  let actualDate = new Date(dateString.value);

  console.log(actualDate, typeof actualDate);
  
  // Adjust the year portion of the date
  actualDate.setYear(actualDate.getYear() +1);
  
  // Send the string representation back to the document
  output.textContent = actualDate;  
});

Please enter a date (mm/dd/yyyy): <input>
<button>Make Date</button>
<div></div>

Answer 4

当您不希望变量成为变量时，在Javascript中将变量强制转换为字符串非常普遍。只要减去两个变量，Javascript就足够聪明地假定它们都是数字。但是，在添加时，Javascript不知道它们是数字还是字符串（因为+运算符用于两者）。

您始终可以通过执行Number(year) + 1或使用parseInt(year) + 1来将字符串强制转换为数字

如何将1加到当年

4 个答案: