Javascript 递增变量函数不起作用_Javascript

Javascript 递增变量函数不起作用

javascript

Javascript 递增变量函数不起作用,javascript,Javascript,虽然我是JavaScript新手，但我正在从头开始构建一些东西。现在，我只想让一个变量——currBook——在按下按钮时增加1。该变量控制从Array-BookTitleList中提取的内容。我现在可以得到要显示的标题，但是变量不会增加。应该增加它的函数advanceBooks正在工作，因为我使用了一个警报来确保。任何帮助都将不胜感激！下面是代码我的JavaScript <script> var bookTitlesList = ["To Kill A Mockingbird",

虽然我是JavaScript新手，但我正在从头开始构建一些东西。现在，我只想让一个变量——currBook——在按下按钮时增加1。该变量控制从Array-BookTitleList中提取的内容。我现在可以得到要显示的标题，但是变量不会增加。应该增加它的函数advanceBooks正在工作，因为我使用了一个警报来确保。任何帮助都将不胜感激！下面是代码

我的JavaScript

<script>
var bookTitlesList = ["To Kill A Mockingbird", "The Lord of the Rings", "A Tale of Two Cities"]; 
var currBook = 0; 
var bookTitle = document.getElementById("bookTitle"); 
var nextBook = document.getElementById("nextBook");

function loadTitle() { 
    bookTitle.innerHTML = bookTitlesList[currBook]; 
    nextBook.innerHTML = bookTitlesList[currBook+1]; 
};

function advanceBook() { 
    alert("This works!"); 
    currBook++; 
}; 
console.log(advanceBook);
</script>


var BookTitleList=[《杀死一只知更鸟》、《指环王》、《双城记》]；
var currBook=0；
var bookTitle=document.getElementById（“bookTitle”）；
var nextBook=document.getElementById（“nextBook”）；
函数loadTitle（）{
bookTitle.innerHTML=bookTitleList[currBook]；
nextBook.innerHTML=BookTitleList[currBook+1]；
};
函数advanceBook（）{
警惕（“这有效！”）；
currBook++；
}; 
控制台日志（advanceBook）；

我的HTML

<html>
<body onload="loadTitle()">
    <h1>Top 100 Best Selling Books</h1>
    <h2 id="bookTitle">Book Titles Go Here</h2>
    <button onclick="advanceBook()" id="nextBook">The Next Book Title Goes Here</button>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>


百大畅销书
书名在这里
下一个书名在这里

您确实在调用

advanceBook（）

，但在任何时候都没有调用

loadTitle（）

，这是在页面中显示下一本书的标题所必需的

console.log(advanceBook);

请注意，这并不调用advanceBook，而只是将其称为一个恰好包含函数的变量。要调用advanceBook，即使它不返回任何内容，请使用以下命令：

console.log(advanceBook());

前进时，还应调用

loadTitle（）

更新DOM中的图书标题

function advanceBook() { 
    alert("This works!");
    currBook++;
    loadTitle();
};

调用

advanceBook（）

时，需要再次调用

loadTitle（）

（就像刷新视图一样）

此外，您还需要确保不会破坏

BookTitleList

数组；例如，您可以将其包装，这样在上一本书之后，您可以再次获得第一本书：

// get next book index and wrap when reaching the end
function nextBookIndex(bookIndex)
{
    return (currBook + 1) % bookTitlesList.length;;
}

function advanceBook() { 
    currBook = nextBookIndex(currBook);
    loadTitle(); // update page
}; 

function loadTitle() { 
    bookTitle.innerHTML = bookTitlesList[currBook]; 
    nextBook.innerHTML = bookTitlesList[nextBookIndex(currBook)];
};

在递增

currBook

之后，您需要再次调用

loadTitle

。除非你让它更新，否则它不会神奇地自我更新。