Question

我从头开始构建一些东西，虽然我是JavaScript的新手。现在，我想要的是一个变量 - currBook - 在按下按钮时增加1。该变量控制从数组中提取的内容 - bookTitlesList。我现在可以显示标题，但变量不会增加。应该增加它的函数，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>

我的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>

Answer 1

您确实在呼叫advanceBook()，但您在任何时候都没有呼叫loadTitle()，这是在您的信息页中显示下一本书的标题所必需的。

Answer 2

当你前进时，你也应该致电loadTitle()来更新DOM中的书名。

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

Answer 3

当您致电advanceBook()时，您需要再次致电loadTitle()（这就像刷新您的观点一样）。

此外，您需要确保不要破坏bookTitlesList阵列;例如，你可以把它包起来，所以在最后一本书之后你再次获得第一本书：

// 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)];
};

Answer 4

console.log(advanceBook);

请注意，这不会调用advanceBook，而只是将其称为碰巧保存函数的变量。要调用advanceBook，即使它没有返回任何内容，请使用：

console.log(advanceBook());

增加变量函数不起作用

4 个答案: