2014-03-05 3 views
2

JavaScript를 처음 사용했지만 처음부터 무언가를 구축하고 있습니다. 바로 지금, 내가 원하는 건 변수를위한 것입니다 - currBook은 - 버튼을 눌렀을 때 하나씩 증가합니다. 이 변수는 Array - bookTitlesList에서 가져온 것을 제어합니다. 제목을 표시 할 수는 있지만 변수는 증가하지 않습니다. 경고를 사용했기 때문에 advanceBooks를 증가시키는 함수가 작동합니다. 어떤 도움을 주시면 감사하겠습니다! 아래는 코드입니다.변수 함수가 증가하지 않음

내 자바 스크립트

<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> 
+0

'currBook'을 증가시킨 후에 다시 'loadTitle'을 호출해야합니다. 업데이트하라는 지시가 없으면 마술처럼 업데이트하지 않을 것입니다. –

답변

2

. 당신이 호출 할 때

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

당신은 참으로 advanceBook()을 요구하고있다,하지만 시점에서 당신은 다음 책의 제목을 표시하는 데 필요한되는, loadTitle()를 호출 귀하의 페이지에

0
console.log(advanceBook); 

이것은 advanceBook을 호출하지 않고 함수를 보유하는 변수로 참조합니다. 그것은 아무것도 반환하지 않는 경우에도, advanceBook를 호출하려면 다음을 사용 : 당신이 전진 할 때, 당신은 또한 DOM에서 책 제목을 업데이트 loadTitle()를 호출해야

console.log(advanceBook()); 
1

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)]; 
}; 
관련 문제