script function 질문!

<div class="card my-4">
                <h5 class="card-header">Search</h5>
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" id="search-input" class="form-control" placeholder="Search for...">
                        <span class="input-group-append">
                <button class="btn btn-secondary" type="button" onclick="search_post();">Go!</button>
              </span>
                    </div>
                </div>
            </div>


<script>
    function search_post(){
        var search value= document.getElementById('search-input');
        alert(search_value);
    }
</script>

강의를 따라하는중 Script function 이 전혀 작동하지않습니다. ㅠ 회색으로만 나옵니다...

이건 뭐가 잘못된건가요 ㅠㅠ 환경설정의 문제인가요..?

강사님 깃허브 코드를 그대로 긁어와도 똑같이 나옵니다..