기억할 몇 가지
- getElementsByName 과 getElementById 를 잘 구별하자.
- 입력한 form을 파일로 외부저장하는 방법 혹은 Clipboard로 옮기는 방법을 공부하자.
- 구글 스프레드 시트를 이용하여 DB 저장하는 방법을 공부하자.
만들게 된 이유
외래에서 진료를 보다 보면, 단순반복 업무를 계속하는 경우가 많다. 특히 환자를 많이 볼 경우 키보드로 타이핑하는 것보다 클릭이 훨씬 더 빠를 수 있기 때문이다. 그러다 보니 예전에 만들고 싶었던 욕망이 있었는데, 간단하게 만들어보았다.
<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
</head>
<style>
body{
font-family:'Nanum Gothic', sans-serif;
}
.my-content{
font-size:30px;
}
.my-range{
font-size:30px;
}
.my-content input[type=radio],.my-content input[type=checkbox]{
/* Double-sized Checkboxes */
-webkit-transform: scale(2); /* Safari and Chrome */
margin: 10px;
}
input[type="button"], input[type="reset"]{
height: 50px;
width: 100px;
font-size: 20px;
background-color: red;
color: white;
font-weight: 700;
}
input[type="reset"]{
background-color: white;
color: #333333;
}
</style>
<script>
function myFunction(){
<!-- 아래 부분은 통증 위치 파악-->
var Location = ""
for(var i=0; i<12; i++){
if(document.getElementsByName("pain-location")[i].checked == true){
var Location = Location +', '+ document.getElementsByName("pain-location")[i].value
}};
<!---->
<!-- 아래 부분은 통증 좌우 파악-->
var Lesion=""
for(var i=0; i<3; i++){
if(document.getElementsByName("pain-lesion")[i].checked == true){
var Lesion = document.getElementsByName("pain-lesion")[i].value
}};
<!---->
<!-- 아래 부분은 외상 여부 파악-->
var Trauma=""
var TraumaReason= document.getElementById("trauma-reason").value
var TraumaDuration= document.getElementById("trauma-duration").value
for(var i=0; i<2; i++){
if(document.getElementsByName("trauma")[i].checked == true){
var Trauma = document.getElementsByName("trauma")[i].value
}};
<!-- 아래 부분은 VAS 파악-->
var VAS=document.getElementById("vas-range").value
<!---->
document.getElementById("my-result").innerHTML=
Location +' '+ Lesion+' '+Trauma+' '+TraumaReason+' '+ TraumaDuration+' VAS:'+VAS;
}
</script>
<body>
<h1> 김병무 가정의학과 전문의</h1>
<ul>
<li>연세대학교 의과대학 졸업</li>
<li>연세대학교 가정의학과 레지던트<li>
</ul>
<form>
<div class="my-content">
<div name="my-pain-location">
<input type="checkbox" name="pain-location" value="목">목
<input type="checkbox" name="pain-location" value="어깨">어깨
<input type="checkbox" name="pain-location" value="등">등<br>
<input type="checkbox" name="pain-location" value="엉덩이">엉덩이
<input type="checkbox" name="pain-location" value="허벅지">허벅지
<input type="checkbox" name="pain-location" value="무릎">무릎
<input type="checkbox" name="pain-location" value="종아리">종아리
<input type="checkbox" name="pain-location" value="발목">발목
<input type="checkbox" name="pain-location" value="발가락">발가락<br>
<input type="checkbox" name="pain-location" value="손가락">손가락
<input type="checkbox" name="pain-location" value="팔꿈치">팔꿈치
<input type="checkbox" name="pain-location" value="손목">손목
</div>
<hr>
<div name="my-pain-lesion">
<input type="radio" name="pain-lesion" value="-/+">좌
<input type="radio" name="pain-lesion" value="+/-">우
<input type="radio" name="pain-lesion" value="+/+">양측
</div>
<div name="my-trauma">
<input type="radio" name="trauma" value="외상(-)" checked>외상 없음
<input type="radio" name="trauma" value="외상(+):">외상 있음
<input type="text" id="trauma-reason" placeholder="이유를 입력하세요"
minlength="4" maxlength="200" size="50" height="30px" style="line-height: 30px;"><br>
<input type="text" id="trauma-duration" placeholder="통증 기간을 입력하세요"
minlength="4" maxlength="200" size="30" height="30px" style="line-height: 30px;">
</div>
<div class="my-range">
VAS <input oninput = 'ShowSliderValue(this.value)' id="vas-range" type = "range" min='0' max='10' value='4' step='2'>
<span id="slider_value_view">4</span>점
<script language = "javascript">
function ShowSliderValue(sVal)
{ var obValueView = document.getElementById("slider_value_view");
obValueView.innerHTML = sVal
}
</script>
<div id="submission-hc">
<input type="button" value="제출" onclick="myFunction()">
<input type="reset" value="새로고침">
</div>
<div id="result">
<hr>
결과 :<span id="my-result"></span>
</div>
</div>
</body>
</html>
'보이지 않는 더 넓은 세상💻 > 개발인지 개🐕발인지' 카테고리의 다른 글
| 구글 스프레드 시트를 DB로 사용하기# 2 (0) | 2019.11.06 |
|---|---|
| 디지털 헬스 해커톤 2019 참가 후기 (2) | 2019.10.16 |
| 보편적이지 않은 개발#3] 구글 스프레드 시트를 DB처럼 이용해보자 (4) | 2019.05.15 |
| 보편적이지 않은 개발] 초진기록지 #2 (0) | 2019.05.15 |
| 보편적이지 않은 개발] 건강검진 추천 프로그램 #1 (0) | 2019.05.10 |
♡를 눌러주시면 블로그를 작성하는데 큰 힘이 됩니다♪
로그인이 필요없어요.
로그인이 필요없어요.
