input에 입력된 값을 다른 곳에 붙여넣기

상황

웹 사용자가 값을 입력할 수 있는 input이 있고, 이곳에 타이핑해서 넣은 값을, button을 클릭하면 onclick 이벤트가 발생하여 특정 id를 가진 화면의 구역으로 텍스트 형태로 붙여넣고 싶은 상황

목차

• 문제해결 순서

문제해결 순서

• input 태그에 ID 값을 부여해준다.

<input type="text" id="인풋아이디">

• 인풋에 담긴 내용을 옮길(출력시킬) 태그에 아이디를 부여해준다. <span>이나 <div> 등
• ① 자바스크립트에서 input 값을 특정 변수에 value로 담는 함수를 지정하고
  ② innerHTML을 통해 변수값을 특정 태그 아이디에 대체시킨다.

function 온클릭함수명() { // 버튼에 온클릭 이벤트로 발생시킬 함수명

	// '값을담을변수명'에 인풋값을 불러온다.
	let 값을담을변수명 = document.getElementById('인풋아이디').value;
    
    // 불러온 인풋값을 특정 span 또는 div 등 아이디를 부여한 구역의 텍스트와 바꾼다.
	document.getElementById('붙여넣을 태그 아이디').innerHTML = 값을담을변수명;

• button에 onclick이벤트로 온클릭함수명을 지정한다. 온클릭함수명이 여러개일 경우 병렬로 작성하면 된다.

<button type="button onclick="온클릭함수명1(); 온클릭함수명2(); 온클릭함수명3();>버튼명</button>