웹개발 예제 캔버스 질문입니다

[병아리짹짹]

모달창 내용에 다음과 같이 적고(성함, 연락처에 class 부여)
<span class="close">&times;</span>                         
    <p class="name">성함</p>
    <input type="text">
    <p class="phone">연락처</p>


장바구니에 html 추가는 아래로 다음과 같이 한 상태에서(a.title 등에 class 부여하여 영수증에 인출하려는 의도)
`< img src="${a.photo}">
    <h4 class="tt">${a.title}</h4>
    <h4 class ="bb">${a.brand}</h4>
    <h4 class="p">가격</h4>
    <h5 class="pp">${a.price}</h5>
    <input type="number" class="inp" value="${a.count}">`

그 상태에서 스크립트쪽에는 다음과 같이 적었습니다

let 성함 ="";
let 연락처 = "";
$(".name").on("input", function(){
    성함 = $(".name").val();
})
$(".phone").on("input", function(){
    연락처 = $(".phone").val();
})

성함 연락처 변수에 값을 넣고

      var canvas = document.getElementById('canvas'); 
      var c = canvas.getContext('2d');
      
      c.font = '15px dotum';
      c.fillText(new Date(), 30, 20);
      c.fillText("구매자 : "+성함, 30, 100); 
      c.fillText("연락처 : "+연락처, 30, 120); 
      c.fillText($(".sum").html(), 30, 140);

캔버스에 성함, 연락처 인출하고

for(let iii =1;iii<5;iii++){
      c.fillText($(".tt").eq(iii-1).html(), 30, iii*80 + 80); 
      c.fillText($(".bb").eq(iii-1).html(), 30, iii*80 + 100); 
      c.fillText($(".pp").eq(iii-1).html(), 30, iii*80 + 120); 
      c.fillText($(".inp").eq(iii-1).html(), 30, iii*80 + 140); 
}

캔버스에 위 html 요소 인출하려 했는데


그런데 여기서 성함, 연락처 둘다 안 뜨고

상품명 브랜드 등등도 다 undefined 뜨는데 뭐가 문제라서 어떻게 고쳐야 할까요?

[codingapple]

.name말고 input태그 찾아서 .val() 붙여야할듯요 
undefined 뜨는건 쓰기전에 출력해보거나 변수정의부분 살펴봅시다

[병아리짹짹]

undefined 뜨는 것이 앞에 click 이벤트로 인한 함수를 안 넣었더라고요... 해결은 했고 잘 작동도 되는데 콘솔쪽에서는

contest.js:358 Uncaught TypeError: Cannot read properties of undefined (reading 'title')

이런 문구가 계속 뜹니다

작동이 안되는 것도 아니고 작동은 되는데 뜨니까 이유를 모르겠네요 왜그럴까요?

[codingapple]

.title 왼쪽 변수가 비어있다는 소리같은데 잘 있는지 출력해봅시다

[글쓴이]

글