Html 클릭시 텍스트 변경 - html keulligsi tegseuteu byeongyeong

Question




    
    
    Document
     


        
    
        
{{msg}}
        hey

클릭시 값이 변경된다는 것은 onclick 이벤트를 추가하는 것과 동일하다.

vue에서는 onclick 이벤트를 추가하기 위해

첫번째, 이번트를 추가할 버튼에 v-on:click="함수명"을 명시해줘야된다.

두번째, Vue 객체를 선언할 때, methods:{~~} 를 선언하여 함수를 선언한다.

단, 여기서 자신의 객체를 접근할 때는 꼭 this를 사용해야된다.

반응형

자바스크립트로 무언가 처리를 하고 그 결과에 따라 화면상에 문자열을 변경하고 싶은 경우가 있습니다.

이런 경우에는 innerHTML 프로퍼티를 사용해 표시하고 싶은 내용으로 변경할 수 있습니다.

innerHTML 프로퍼티를 사용해 표시내용을 변경하는 방법을 알아보겠습니다.

innerHTML

우선 innerHTML이 무엇인지 살펴보겠습니다.

innerHTML은 HTML요소의 내용을 ㄹ변경하고 싶은 경우에 사용하는 Element오브젝트의 프로퍼티입니다.

예를 들어 div요소나 span요소에 작성한 동적으로 내용을 변경할 때 사용할 수 있습니다.

innerHTML 프로퍼티 사용 방법은 아래와 같습니다.

document.getElementById("id 이름").innerHTML = 변경하고 싶은 내용

innerHTML을 사용하기 위해서는 HTML요소에 id 이름을 지정해야 합니다.

문자열 변경

innerHTML 프로퍼티를 사용해 문자열을 변경하는 예제를 보겠습니다.

아래 샘플의 버튼을 클릭하면 문자열이 변경됩니다.

안녕하세요

샘플 소스를 보겠습니다.

<script type="text/javascript">

// 버튼 클릭 이벤트
function innerSample1() {
    // span 문자열 변경
    document.getElementById("test1").innerHTML = "Hello！";
}

</script>

<div style="background-color : #CCC;">
    <form>
        <span id="test1" style="font-size: 120%;">안녕하세요</span>
        <br/>
        <br/>
        <input type="button" value="버튼" onClick="innerSample1()">
    </form>
</div>

span 요소에 안녕하세요 라는 문자열을 표시하고 있습니다.

span 요소에는 test1이라는 id 이름을 지정했습니다.

버튼에는 onClick 이벤트를 설정해 innerSample1 함수를 호출하고 있습니다.

innerSample1 함수에서는 id 이름 test1에 문자열을 Hello！로 변경하도록 설정하고 있습니다.

이번에는 문자열 색상도 같이 변경하는 방법을 보겠습니다.

innerHTML에는 문자열뿐만이 아닌 HTML요소를 지정할 수 있습니다.

아래 버튼을 클릭하면 문자열과 색상이 변경이 됩니다.

안녕하세요

<script type="text/javascript">

// 버튼 클릭 이벤트
function innerSample2() {
    // span 문자열 변경
    document.getElementById("test2").innerHTML = "<span style='color: red;'>Hello！</span>";
}

</script>

<div style="background-color : #CCC;">
    <form>
        <span id="test2" style="font-size: 120%;">안녕하세요</span>
        <br/>
        <br/>
        <input type="button" value="버튼" onClick="innerSample2()">
    </form>
</div>

이번 샘플에서도 버튼을 클릭하면 안녕하세요 라는 문자열을 Hello！로 변경하고 있습니다.

문자열이 변경되면서 색상은 빨간색으로 변했습니다.

기본에 있던 span 요소에 색상 스타일을 변경한 것은 아닙니다.

span 요소에 빨간색 스타일을 적용시간 span 요소가 추가된 것입니다.

이렇게 새로운 요소를 추가하는 방법을 사용하면 span 요소뿐만 아니라 다른 HTML 요소들도 추가할 수 있습니다.

innerHTML을 사용해 문자열을 변경하는 방법을 알아봤습니다.

자바스크립트와 innerHTML을 사용하면 동적인 화면을 만드는데 많은 도움이 됩니다.

반응형

게시글 관리

구독하기포뇨아빠

저작자표시 비영리 변경금지

'IT > JavaScript・자바스크립트' 카테고리의 다른 글

자바스크립트 HTML 태크 이름으로 요소 취득 방법 getElementsByTagName (0)2022.03.31자바스크립트 HTML id로 데이터 문자열 취득 방법 예제 (0)2021.11.22자바스크립트 항목 표시, 비표시 방법 예제 (0)2021.10.26자바스크립트 람다식(화살표 함수) 사용 방법 주의점 (3)2020.02.11jQuery Form 데이터 배열, 쿼리 형식으로 전송하기 (0)2020.02.03

오늘 면접을 한 곳 보고왔는데, 이 때 받은 손코딩 문제중에 하나를 기억하고자 남기려고 한다. 사실 코딩 테스트라고 하기엔 좀 쉬운 문제였는데, 긴장을 해서인지 이것조차 못풀고온게 찝찝해서 정리해본다.

<html>
  <head>
    <meta charset="UTF-8">
    <title>quiz1</title>
  </head>
  <body>
    이거슨 당신이 자바스크립트를 다뤄봤는지를 묻는 테스트입니다.<br>
    아래 문장에서 java를 javascript로 바꿔보시죠.<br>
    <p>
      당신이 공부하는 언어는 <span class="quiz-text">Java</span>입니까?
    </p>
    <button id="jqueryBtn" type="button" onclick="changeByjQuery()">Run by jQuery</button>
    <button id="jsBtn" type="button" onclick="changeByJS()">Run by JS</button>
  </body>
</html>

정확한 코드는 아니고 대충 비슷한 상황을 만들어봤다.
자바스크립트 코드를 이용해서 class가 할당된 html 텍스트 하나를 다른 텍스트로 변경해보는 문제였다. jQuery로 풀어도 되는줄 모르고 순수 자바스크립트로만 접근하다 결국 못풀었지만, 여기에 정리하는 방법은 jQuery를 쓰는것과 순수자바스크립트로 해결하는 것 두가지 모두 정리해보았다.

* 작동하는 코드가 실행되는 화면은 아래 code.pen으로 확인할 수 있다. *

jQuery 사용해서 해결

$("#jqueryBtn").click(function(){
   $(".quiz-text").text("Javascript");
   $(".quiz-text").css('color', 'blue');
});

id="jqueryBtn"이 클릭되면 함수가 작동되도록 비동기로 작성한 코드이다. element 셀렉트를 jQuery($)를 이용하기만 하면 된다. 심플하기도 하고, 직관적이어서 별로 설명이 필요없다.
* 작동하는 코드가 실행되는 화면은 아래 code.pen으로 확인할 수 있다. *

순수 자바스크립트로 해결

jQuery를 사용하면 저렇게 쉽게 풀리는 문제였지만, 멍청하게도 jquery 라이브러리를 호출한 코드가 안보인다는 이유로 순수 자바스크립트로 접근했다. 그런데 document.getElementById()외엔 생각나지 않아서 결국 못쓰고 나왔다. 문제 속 텍스트는 class로만 명시되어 있었고 id가 명시되지 않았었다. 그래서 StackOverflow에서 찾아봤다. 순수자바스크립트로 풀수 있는 방법을..

JavaScript text 변경