자바스크립트 - 버튼과 프롬프트 창을 활용한 응용예제

안녕하세요

이번에는 자바스크립트에서 버튼을 눌렀을 때 정보를 입력하라는 프롬프트 창과,

그 프롬프트 창에 정보를 입력했을 시 색상이 변경되는 출력문이 나오는 예제를 올려봅니다.

========================================================

 ========================================================

<button onclick="show();"> 생성된 객체를 보여주세요 </button> // 버튼을 눌렀을 때 show 함수 실행

<div id="msg"></div> // div 태그에 msg 아이디 부여



<script type="text/javascript">



function show()

{

var cr=prompt("자동차 색상을 입력하세요", "red");

var km=prompt("자동차 시속을 입력하세요", "100");



//car 객체 구현

var car={

type:"스포츠카";

color:cr,

cc:'3000cc',

run:function(){

return "시속 "+km+" km로 달립니다~"; // 함수를 실행했을 때 반환되는 문장

}

}



var obj=document.getElementById("msg"); // 아이디가 msg라는 곳에 위치 파악

var str=car.type+","+car.color+","+car.cc+" 자동차>>";

str+=car.run(); // 시속 문자열을 기존 str 변수에 저장(아직 출력은 안한 상태)



// 출력문

obj.innerHTML = "<h1 style='color:'+car.color+"'>") + str + "</h1>"; // 아이디가 msg인 곳에 문자 출력

 // car.color 대신 cr 넣어도 됨(색깔 변환)

 }

</script>