JS) 영화 평점 시스템 (select, option의 활용)

const movieNameText = document.createElement('h1');

const movieName = document.createElement('h2');

const whatsYourRating = document.createElement('h1');

const movieRating = document.createElement('select');

 

const movieRatingStarFive = document.createElement('option');

const movieRatingStarFour = document.createElement('option');

const movieRatingStarThree = document.createElement('option');

const movieRatingStarTwo = document.createElement('option');

const movieRatingStarOne = document.createElement('option');

 

const averageRatingText = document.createElement('h1');

const averageRating = document.createElement('h2');

 

const ratingNames = ['', 'onestar', 'twostar', 'threestar', 'fourstar', 'fivestar'];

//나중에 setAttribute를 반복문을 통해서 설정하기 위해 선언한 배열.

 

movieNameText.textContent = "영화 제목";

movieName.textContent = "아바타 2 : 물의 길";

whatsYourRating.textContent = "당신의 평점은?";

averageRatingText.textContent = "평균 점수?";

 

movieRating.setAttribute('onchange', 'onChange()');

 

movieRatingStarFive.textContent = '★★★★★';

movieRatingStarFour.textContent = '★★★★';

movieRatingStarThree.textContent = '★★★';

movieRatingStarTwo.textContent = '★★';

movieRatingStarOne.textContent = '★';

 

movieRatingStarFive.setAttribute('value','fivestar');

movieRatingStarFour.setAttribute('value','fourstar');

movieRatingStarThree.setAttribute('value','threestar');

movieRatingStarTwo.setAttribute('value','twostar');

movieRatingStarOne.setAttribute('value','onestar');

movieRating.appendChild(movieRatingStarFive);

movieRating.appendChild(movieRatingStarFour);

movieRating.appendChild(movieRatingStarThree);

movieRating.appendChild(movieRatingStarTwo);

movieRating.appendChild(movieRatingStarOne);

 

document.body.appendChild(movieNameText);

document.body.appendChild(movieName);

document.body.appendChild(whatsYourRating);

document.body.appendChild(movieRating);

document.body.appendChild(averageRatingText);

document.body.appendChild(averageRating);

function onChange(){

    averageRating.textContent = movieRating.options[movieRating.selectedIndex].value;

   

}

 

select 태그는 onchange 속성을 사용해서 함수를 호출한다.

이때 select 태그 element.selectedIndex는 사용자가 선택한 option의 배열 형태 index를 반환한다.

그리고 element.options[index]를 통해 해당 index에 있는 option의 value 값을 받아올 수 있다.

결국,

movieRating.options[movieRating.selectedIndex].value

위 코드는  사용자가 선택한 option의 value 값을 index를 통해 받아오는 것이다.

 

자바스크립트를 수정해서

작품성, 연기, 오락성, 스토리 요소를 평가하고

결과값을 평균내는 기능을 만들었다. 

 

const movieNameText = document.createElement('h1');

const movieName = document.createElement('h2');

const averageRatingText = document.createElement('h1');

const averageRating = document.createElement('h2');

const movieRatingSelections = ['작품성', '연기', '오락성','스토리'];

const ratingValues = [1, 2, 3, 4, 5];

const ratingStars = ['★', '★★', '★★★', '★★★★', '★★★★★']

function ShowRatingOptions(){

    for (select in movieRatingSelections){

        let ratingText = document.createElement('h1');

        let movieRatingSelection = document.createElement('select');

        let movieRatingDiv = document.createElement('div');

 

        movieRatingDiv.setAttribute("class", "movie-rating-div");

        movieRatingSelection.setAttribute("id", movieRatingSelections[select]);

        movieRatingSelection.setAttribute("onchange", "onChangeRating()");

 

        ratingText.textContent = movieRatingSelections[select];

       

        let i = 0;

        for (ratevalue in ratingValues){

            let movieRatingOption = document.createElement('option');

            movieRatingOption.setAttribute('value', ratingValues[ratevalue]);

            movieRatingOption.textContent = ratingStars[i];

            movieRatingSelection.appendChild(movieRatingOption);

            i++;

        }

       

        movieRatingDiv.appendChild(ratingText);

        movieRatingDiv.appendChild(movieRatingSelection);

 

        document.body.appendChild(movieRatingDiv);

    }

}

 

function onChangeRating(){

    averageRating.textContent = CalculateAverageRating() + '/' + ratingStars.length;

}

 

function CalculateAverageRating(){

    let averageRateScore = 0;

 

    for(movieRates in movieRatingSelections){

        let tempRating = document.getElementById(movieRatingSelections[movieRates]);

        averageRateScore += Number(tempRating.options[tempRating.selectedIndex].value);

       

    }

    return averageRateScore / movieRatingSelections.length;

}

 

function ShowAverageRating(){

    averageRatingText.textContent = "평균 점수?";

    document.body.appendChild(averageRatingText);

    document.body.appendChild(averageRating);

}

 

function ShowMovieName(){

    movieNameText.textContent = "영화 제목";

    movieName.textContent = "아바타 2 : 물의 길";

    document.body.appendChild(movieNameText);

    document.body.appendChild(movieName);

}

 

ShowMovieName();

ShowRatingOptions();

ShowAverageRating();