【JS】swithを使った条件式

by tea4two

HTML

<select name="" id="select">
    <option value="">選択してください</option>
    <option value="ushi">おうし座</option>
    <option value="yagi">やぎ座</option>
    <option value="kani">かに座</option>
    <option value="saso">さそり座</option>
    <option value="ite">いて座</option>
</select>
<div id="result">はいるよ！</div>

CSS

/*
今日はまずまず好調
今日は不調(；一_一)
今日はふつう(´・∀・｀)
いいえわたしは…
今日は絶好調のふり！
*/
 #result {
    display: none;
}

JavaScript

var holoscope = document.getElementById('select'),
    result = document.getElementById('result');

result.style.display = 'none';

function holoFunc() {
    var selected = holoscope.value;
    console.log(selected);
    switch (selected) {
        case 'ushi':
            result.style.display = 'block';
            result.innerHTML = '今日はまずまず好調';
            break;
        case 'yagi':
            result.style.display = 'block';
            result.innerHTML = '今日は不調(；一_一)';
            break;
        case 'kani':
            result.style.display = 'block';
            result.innerHTML = '今日はふつう(´・∀・｀)';
            break;
        case 'saso':
            result.style.display = 'block';
            result.innerHTML = 'いいえわたしは…';
            break;
        case 'ite':
            result.style.display = 'block';
            result.innerHTML = '今日は絶好調のふり！';
            break;
        case '':
            result.style.display = 'none';
            result.innerHTML = '';
            break;
    }
}

holoscope.addEventListener('change', holoFunc, false);