UI 구현하는거 문제 풀어주세요 ㅠㅠ 제발 HTML CSS입니다

UI 구현하는거 문제 풀어주세요 ㅠㅠ 제발 HTML CSS입니다

작성일 2022.07.18댓글 2건
    게시물 수정 , 삭제는 로그인 필요

버튼을 클릭하면 '클릭 후'로 버튼 내부 텍스트가 바뀌고 버튼 내부 글자 색이 붉은 색이 되도록 아래와 같이 코드를 작성하였으나 올바르게 동작하지 않았다.

[원인(10점)]에 올바르게 동작하지 않은 원인 2가지를 기술하고, 

[조치내용(10점)]에 올바르게 동작할 수 있게 수정 된 코드 2가지를 기술하시오. (20점)


[수행 코드]

<button id="btn">클릭 전</button>

<script>

    var button = document.getElementById('btn');

    button.addEventListener('click', function(){

        button.value = '클릭 후';

        button.style.backgroundColor = 'red';

    });

</script>




profile_image 익명 작성일 -

원인

1. value가 아니라 글자를 수정해야 함

2. 배경색이 아니라 글자색을 수정해야함.

<button id="btn">클릭 전</button> <script> var button = document.getElementById('btn'); button.addEventListener('click', function(){ button.innerText = '클릭 후';//텍스트 변경 button.style.color = 'red';//글자색 변경 }); </script>

profile_image 익명 작성일 -

잘못된 원인은

1. button.value 가 아닌 textNode의 값을 변경해야하기에 innertext를 사용해야합니다.

2. 백그라운드 컬러가 아닌 텍스트 색상을 변경해야 하기에 style의 color 속성 값을 변경해야합니다.

수정 답안

<button id="btn">클릭 전</button> <script> var button = document.getElementById('btn'); button.addEventListener('click', function(){ button.innerText = '클릭 후'; button.style.color = 'red'; }); </script>