Javascript-05. random quote출력하기

Hyunah Park·2021년 7월 5일
0

JS

목록 보기
5/14

먼저 quote와 author의 세트를 quote.js파일로 만든다.

html에 공간을 만들어 둔다.

    <div id="quote">
        <span></span>
        <span></span>
    </div>

그리고 quotes.js를 html에 불러온다.

<script src="quote.js"></script>

quotes.js에서 html의 quotes 영역을 선택한다.

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

그다음에, quotes의 array에서 랜덤한 것을 선택하기 위해
Math.random()을 이용한다.

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

그리고 html에 quote와 author을 넣어주기 위해
아까 설정한 quote에 innerText 속성으로 오늘의 quote에 quote, author을 할당해준다.

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

마지막에 uncaught syntax error로 quote와 author가 이미 사용되었다고 나와서 애먹었다.
아무리 array안에 있어도 중복되면 안되나보다. 변수명은 다른 이름으로 지어주는게 좋겠다.

profile
hello world explorer

0개의 댓글