문제점
* div 창에 결과값들이 담기지 않는다.
문제 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{border: 1px solid black;
background-color: blanchedalmond;
width: 300px;
height:200px;}
</style>
</head>
<body>
<h3>HTML 태그에 접근 테스트</h3>
<p>단, 구매자는 태그 이름으로 접근, 상품명은 아이디로 접근, 구매가격은 name값으로 접근할 것 </p>
구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요" size="23"> <br><br>
상품명 : <input type="text" name="" id="pName" placeholder="구매 상품명을 입력하세요" size="23"> <br><br>
가격 : <input type="text" name = "price" placeholder="구매 가격을 입력하세요" size="23"> <br><br>
<button onclick="textPrint();">입력값 출력하기</button>
<div></div>
<script>
function textPrint(){
var user = document.getElementsByTagName("input");
var pName = document.getElementById("pName");
var text = Number(document.getElementsByName("price"));
console.log(user);
console.log(pName);
console.log(text);
}
</script>
</body>
</html>
나의 로직
1) 각각의 input 요소에 태그, 아이디, 네임 속성을 이용해서 문제를 해결한다
2) price는 넘버 타입이기 때문에 강제 형변환을 진행한다.
3) 배열에 담아서 한방에 출력한다 (?)
4) innerHTML을 활용한다.
모범답안
userName을 0번째 인덱스에 담기 위해서 userNameTF라는 변수를 생성해서, userNameTF에 div 요소 객체를 담은 다음.
그 값을 userName의 0번째 인덱스에 담았다. price역시 마찬가지이다.
area라는 변수 안에 id가 area인 요소 객체를 담았고, 그 안에 innerHTML로 입력된 값들이 출력되게끔 했다.
궁금증 해소!
- 35행) 한 큐에 담는 방법
- 42행) area.innerHTML = ""; < 초기화하는 이유는 새로운 값을 입력한 후 버튼을 눌러서 출력할 때 innerHTML을 싹 비우기 위함!
- userName,price를 pName처럼 기술하면 undefined이 되는데 그 이유는..?
- 위의 경우, number타입을 강제 형변환을 할 필요 없는 이유가 총합이나 평균을 구하는 등 산술식 ( number )이 굳이 필요 없어서 그런 것일까? == 여러 숫자를 가지고 산술식을 하는 경우는 형변환을 해야함. 출력만이 목적일 경우는 형변환할 필요가 없다.
실험
만약 userName, price를 pName처럼 기술한다면?
더보기
우측 사진처럼 undefined이 된다.
왜?
만일 document.getElementsByTagName("input").value 하게 되면 당연히 undefined 출력된다.
그 이유는 document.getElementsBy~~ 는 배열이기 때문에 배열.value 를 해버린 셈이기 때문,
만일 하고자 했다면 var userName = document.getElementsByTagName("input")[0].value; 이렇게 해야한다.
728x90
'🚨 Error > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열 | 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다. (0) | 2021.04.17 |
|---|---|
| [JavaScript] 간이 계산기 만들기 (0) | 2021.04.16 |
| [JavaScript] 이가 없으면 잇몸으로 | split 구분자를 이용해서 배열을 생성하고 출력하기 (0) | 2021.04.16 |
| [JavaScript] 어..? 이게 되네..? (0) | 2021.04.16 |
| [JavaScript] 원하는 컬러로 배경색 변경하기 (0) | 2021.04.15 |
댓글