버튼 클릭 시 버튼 변경 - beoteun keullig si beoteun byeongyeong

개발하자/jQuery

클릭한 버튼 원하는 값으로 바꾸기

2015. 2. 27. 15:46

$(document).ready(function(){

$("input").click(function(){
//this.value="홍길동";
$(this).val("홍길동"); //인자값 주지 않으면 값을 얻어오는것이고 인자값 주면 셋팅하는 것이다.
});

});

</script>
</head>
<body>
<input type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
</body>
</html>

id를 지정해준다.

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트</title>

</head>

<body>

<h2 id="title">This Works!</h2>

</script>

</body>

</html>

id="title" 를 가지고 와서 title 상수에 담는다.

handeClick() 함수를 만들어 id="title"을 클릭하면 색상이 blue로 변경되게 한다.

title.요소에 이벤트를 설정하여 클릭을 하면 함수가 실행되게 한다.

const title = document.querySelector("#title");

// handleResize 함수를 만든다.

function handleClick(){

title.style.color = 'blue';

}

// id="title" 을 클릭하면 이벤트를 발생시킨다.

// 이벤트의 내용은 handleClick()함수에 담고 있다.

title.addEventListener("click", handleClick);

텍스트를 클릭하면 색상이 바뀜

기본색상이 있는 텍스트를 클릭하면 다른색으로 변경 다시 클릭하면 원래색으로 돌아오게하는 방법

직접적으로 css코드를 바꾸는 방법은 좋은 방법이 아니야.

const title = document.querySelector("#title");

const BASE_COLOR = "red";

const OTHER_COLOR = "blue";

//함수만들어준다.

function handClick(){

const currentColor = title.style.color;

if(currentColor === BASE_COLOR){

title.style.color = OTHER_COLOR;

}else{

title.style.color = BASE_COLOR;

}

//초기화값

function init(){

title.style.color = BASE_COLOR;

title.addEventListener("click",handClick);

}

//초기값 실행

init();

텍스트를 클릭을 하면 클래스를 clicked를 넣어주는 방법

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handClick(){

const hasClass = title.classList.contains(CLICKED_CLASS);

if(hasClass){

title.classList.remove(CLICKED_CLASS);

}else{

title.classList.add(CLICKED_CLASS);

}

function init(){

title.addEventListener("click", handClick)

}

init();

위의 코드를 아래의 toggle로 간단하게 변경할 수 있어!

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handClick(){

title.classList.toggle(CLICKED_CLASS);

}

function init(){

title.addEventListener("click", handClick)

}

init();

버튼 클릭 게임 자동 버튼 클릭 노트북 클릭이 안될때 마우스 클릭 버튼 오른쪽 클릭 클릭이 안될때 windows 시작버튼 마우스 오른쪽 클릭

버튼 클릭 시 버튼 변경 - beoteun keullig si beoteun byeongyeong

클릭한 버튼 원하는 값으로 바꾸기

관련 게시물

로블록스 공포게임 순위 - lobeullogseu gongpogeim sun-wi

모바일 게임 마케팅 성공 사례 - mobail geim maketing seong-gong salye

재미있는 빙고게임 - jaemiissneun bing-gogeim

스팀 좀비서바이벌 - seutim jombiseobaibeol

마우스 매크로 사용법 - mauseu maekeulo sayongbeob

자동차 공조기 - jadongcha gongjogi

아이폰 갤럭시 크기비교 - aipon gaelleogsi keugibigyo

윈도우 11 설정 팁 - windou 11 seoljeong tib

셜록 홈즈 악마 의 딸 마야 - syeollog homjeu agma ui ttal maya

모바일 경영 게임 - mobail gyeong-yeong geim

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi

아기는 몇살까지? - agineun myeochsalkkaji?

섬머 포켓 스위치 - seommeo pokes seuwichi

사진 수염 제거 어플 - sajin suyeom jegeo eopeul

복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?

마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi

롤20 브금 매크로 - lol20 beugeum maekeulo

아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun

Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae

온 세상 창조주 ppt - on sesang changjoju ppt

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의