[js] 버튼 클릭시 배경색 바꾸기 (Background Changer)

GY·2021년 5월 26일

Vanilla JS Project

목록 보기

1/19

결과물

<html>
  <head>
    <style>
      .center {
        position: fixed;
        bottom: 500px;
        right: 900px;
        text-align: center;
        font-size: 80pt;
      }
      .buttonclick {
        position: fixed;
        height: 300px;

        bottom: 220px;
        right: 850px;
      }
      #code {
        position: fixed;
        bottom: 500px;
        right: 400px;

        font-size: 80pt;
      }
    </style>
    <title>HEXCOLOR</title>
  </head>
  <body id="backgr">
    <div id="hexcolor">
      <h1 class="center">#HEX COLOR :</h1>
      <h1 id="code">dd</h1>
      <div class="buttonclick">
        <input
          type="button"
          style="
            background-color: #808080;
            border: 0;
            outline: 0;
            height: 80px;
            width: 200px;
            font-size: 35px;
            color: white;
            border-radius: 10px;
          "
          name="button"
          value="CLICK ME"
          onclick="hexcode()"
        />
      </div>
    </div>
    <div id="button"></div>
    <div id="background"></div>
    <script>
      function hexcode() {
        var number = [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          0,
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
        ];
        var newarr = [];

        for (var i = 0; i < 6; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        var hex = "#" + newarr.join("");
        var x = document.getElementById("backgr");
        x.style.backgroundColor = hex;
        document.getElementById("code").innerHTML = hex;
      }
    </script>
  </body>
</html>

과정

Step1 : 이미지 페이지를 만들자

```jsx
<html>
  <head>
    <style>
//보다 안정적으로 위치를 조정했다.
      .center {
        position: fixed;
        bottom: 500px;
        right: 900px;
        text-align: center;
        font-size: 80pt;
      }
      .buttonclick {
        position: fixed;
        height: 300px;

        bottom: 220px;
        right: 850px;
      }
    </style>
    <title>HEXCOLOR</title>
  </head>
  <body id="backgr">
    <div id="hexcolor">
      <h1 class="center">#HEX COLOR :</h1>
      <h1 id=code></h1>
      <div class="buttonclick">
//버튼 스타일 변경
        <input
          type="button"
          style="
            background-color: #808080;
            border: 0;
            outline: 0;
            height: 80px;
            width: 200px;
            font-size: 35px;
            color: white;
            border-radius: 10px;
          "
          name="button"
          value="CLICK ME"
          onclick="hexcode()"
        />
      </div>
    </div>
    <div id="button"></div>
    <div id="background"></div>
    
  </body>
</html>
```

Step2 : 랜덤한 Hex color code를 생성하는 함수 작성하기

#1 Hex code가 어떻게 구성되는지 먼저 살펴보자.

뒤에 6자리의 숫자 및 알파벳이 붙는다. 알파벳은 a~f까지만 해당되며, 짝수로만 들어가는 것 같다. 6자리 숫자/문자 조합을 만들어보자.

var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
#중복포함해 배열에서 6개 원소를 가져오기

#2 특정 키를 랜덤하게 만들어서, 그 키의 값을 가져왔으면 좋겠다.

키의 값을 가져오는 함수 : Indexof()
총 15개 원소의 키를 랜덤하게 생성 : Math.random()

https://poiemaweb.com/js-math

- Math.random은 0~1까지 소수를 랜덤하게 만드는데, 내가 필요한 15까지의 숫자로 만드려면 이 범위의 최소값과 최대값을 따로 만들어주어야 한다고 한다.(ㅠ) 
- 최소값을 변경할 때는 더하기로 들어가기 때문에 최댓값과 최솟값모두 설정해주어야 하지만, 나는 최솟값은 0이면 되기 때문에 상관없겠다.

    ```jsx
    //최댓값 설정 방법:
    Math.random()*15
    //0~1까지의 범위에서 랜덤으로 숫자를 만들어내기 때문에,
    //1에 최댓값을 곱해 범위를 늘려주면 된다.
    ```

- 여전히 생성되는 숫자는 소숫점 이하 자리까지 포함이므로,정수로 바꿔주어야 한다. 이전에 알고리즘 문제풀이에서 사용하면서 알게되었던 Math.floor를 사용하면 될 것 같다.

    ```jsx
    Math.floor(Math.random()*15)
/*[실행결과] 반복적으로 실행했을 때 number배열안에 들어있는 숫자 
혹은 문자 하나가 랜덤으로 출력된다. (indexof는 사용할 필요가 없겠다.)

    ```

#3 한 개로 출력되는 랜덤 숫자/문자를 6개 조합 색상코드로 만들자.

흠..반복문을 사용해 6자리가 되기까지 랜덤으로 배열원소를 추출한 다음, 새로운 배열에 담으면 될 것 같다. 새로운 배열에 원소 추가는 어떻게 할까?

https://poiemaweb.com/js-array
[자바스크립트] 배열에 값 앞 또는 뒤에 추가하기, unshift(), push()

배열에서 랜덤하게 6개 원소를 추출해보자.

var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
var newarr = []

for (var i=0; i<5; i++) {
	newarr.push(number[Math.floor(Math.random()*15)])

}
/*Math.random()*15 : 0~15까지의 랜덤한 난수를 출력
Math.floor(Math.random()*15 : 소숫점 이하를 버림해, 0~15까지의 랜덤한 정수를 출력
number[Math.floor(Math.random()*15] : 랜덤한 정수에 해당하는 number배열의 인덱스의 값을 출력
	예) number[1] : 2
newarr.push(number[Math.floor(Math.random() * 15)]);:newarr 배열의 맨 뒤에 해당 값을 추가

[실행결과] 랜덤으로 6개 문자 혹은 숫자가 출력된다.

추출한 6개 문자/숫자들을 새로운 배열 newarr에 담아보자.

var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
var newarr = []

for (var i=0; i<5; i++) {
	newarr.push((number[Math.floor(Math.random()*15)]))

}
/*[9,6,3,"d",4]
우리가 원하는 #079de3 과 같은 연속된 숫자코드가 아닌, 쉼표로 구분되며 각 숫자와 문자형태로
나타나는 배열의 요소들이 출력된다

[실행결과] 실행할때마다 랜덤한 문자로 구성된 배열 newarr가 출력된다.*/

하나의 문자열로 합치고, 맨 앞에 #을 붙여 출력하자.

https://poiemaweb.com/js-function

https://poiemaweb.com/js-array
[자바스크립트] 배열을 문자열로 변환, 요소 합치기; Join Array JavaScript](http://mwultong.blogspot.com/2007/02/join-array-javascript.html)

배열을 문자열로 변환하기 위해서는 join을 쓰고, 문자 '#'을 앞에 붙여 함께 출력하면 될 것 같다.

console.log('#'+newarr.join(''))
/*[실행결과] newarr의 6개 원소가 합쳐져 하나의 문자열이 되었다.

전체 코드를 하나의 함수로 만들어 간단하게 반복 출력해보자.

function hexcode() {
var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
var newarr = []

for (var i=0; i<5; i++) {
	newarr.push((number[Math.floor(Math.random()*15)]))

}
return('#'+newarr.join(''))
}
/* [실행결과] 반복 출력할 때마다 각기 다른 코드가 출력된다.

그런데...HEX COLORCODE는 문자 혹은 숫자가 짝수의 조합으로만 이루어진 것 같다.

이를 해결하기 위해서는 숫자와 문자 배열을 따로 만든 후, 짝 수 개로 각각 출력한다음 배열을 합쳐 출력해야 할 것 같다.

이건 나중에 생각하고, 우선 다음 단계로 넘어가보자.

Step3 : 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기

만든 자바스크립트 함수를 html문서에 적용시키자.

head 혹은 body에

<html>
  <head>
    <style>

      body {
        background-color: hexcode();
      }

      }

      #hexcolor {
        height: 100px;
      }

      #button {
        height: 60px;
        width: 1000px;
      }
    </style>
    <title>HEXCOLOR</title>
  </head>
  <body>
    <div id="hexcolor">
      <h1>HEX COLOR :</h1>
      <input type="button" name="button" value="Click Me" onclick = />
    </div>
    <div id="button"></div>
    <div id="background"></div>
    <script>
      function hexcode() {
        var number = [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          0,
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
        ];
        var newarr = [];

        for (var i = 0; i < 5; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        return "#" + newarr.join("");
      }
      
    </script>
  </body>
</html>

#1 html 상에서 함수를 호출해 실행하자

자바스크립트 style 변경 하기!

head 또는 body에

사용자 지정 CSS 속성 사용하기 (변수)

아래처럼 hexcode함수를 적용하지 않고,
버튼클릭 시 직접 지정한 컬러코드로 배경색을 변경하도록
코드를 작성하면 정상적으로 작동한다.

함수가 문제다..

        var x = document.getElementById("backgr");

        x.style.backgroundColor = "#eb4034";

아..성공했다.


        var newarr = [];

        for (var i = 0; i < 6; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        var hex = "#" + newarr.join("");
        // return hex;

        var x = document.getElementById("backgr");

        x.style.backgroundColor = hex;

코드 실행이 안됐던 이유

조건문 반복을 i<5로 만들어 다섯자리 코드를 생성하고 있었다.
return문은 함수를 종료하면서 그 이후 코드를 실행하지 않는데, 굳이 두어서 배경색 변경이 되지 않는 거였다.

#2 버튼 클릭시 변경된 HEXCODE를 텍스트로 화면에 출력하자.

[JS] 자바스크립트의 화면 출력 방법 정리

document.getElementById로 위에서 배경색 지정id를 찾아 배경색css를 변경했듯이,같은 방법으로 시도해보았으나 실패했다.

var x = document.getElementById("backgr");
        var y = document.getElementById("code");
        var y = document.getElementById("code");
        x.style.backgroundColor = hex;
        document.getElementById("code");
        document.write(hex);

*document.write()은 특히나 기존 html요소를 전부 지우기 때문에 테스트 용도로만 사용한다고 한다.

HTML요소에 출력하는 innerHTML을 사용해보자.


  </head>
  <body id="backgr">
    <div id="hexcolor">
      <h1 class="center">#HEX COLOR :</h1>
      <h1 id="code">dd</h1>                   //id가 code인 텍스트 dd가 화면상에 출력된다.
      <div class="buttonclick">
        <input
          type="button"
          style="
  //생략
          onclick="hexcode()"   //이 버튼을 클릭할 때 hexcode()함수 실행
    <script>
      function hexcode() {      //hexcode()함수는 랜덤으로 6자리 숫자코드를 생성한다.
        var number = [
      //생략
        var newarr = [];

        for (var i = 0; i < 6; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        var hex = "#" + newarr.join("");//랜덤으로 생성한 숫자코드를 hex라는 변수에 저장
        var x = document.getElementById("backgr");
        x.style.backgroundColor = hex;
        document.getElementById("code").innerHTML = hex;  

				//id가 code인 태그에 접근해, HTML을 hex로 변경한다.
				//화면상에 출력된 dd라는 텍스트가 랜덤으로 생성된 숫자코드로 변경된다.

완성!

배운점 정리

키의 값을 가져오는 함수 : Indexof()

//이번 프로젝트에서 쓰지는 않았지만..검색해본 김에 정리!(인용)

string.indexOf(searchvalue, position)

/*indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 
검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
파라미터
searchvalue : 필수 입력값, 찾을 문자열
position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치
찾는 문자열이 없으면 -1을 리턴합니다.
문자열을 찾을 때 대소문자를 구분합니다.

출처: https://hianna.tistory.com/379 [어제 오늘 내일]

새로운 배열에 원소 추가하기: push()

newarr.push('N');
//push()는 배열의 맨 뒤에 값을 추가한다.
newarr.unshift('N')
//unshift()는 배열의 맨 앞에 값을 추가한다.

HTML요소 변경하기: innerHTML

화면상의 글자 등 HTML요소를 변경하고자 할 때 사용한다.
document.getElementbyId로 원하는 Id를 가진 태그의 정보를 가져온 뒤, 이 정보를 innerHTML을 사용해 변경할 수 있다.

      <h1 id="code">dd</h1>                   
//id가 code인 텍스트 dd가 화면상에 출력된다.

        var newarr = [];

        for (var i = 0; i < 6; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        var hex = "#" + newarr.join("");
//랜덤으로 생성한 숫자코드를 hex라는 변수에 저장한다.

        var x = document.getElementById("backgr");
//document.getElementById를 통해 backgr라는 태그의 정보를 가져와 변수x로 정의한다.

        x.style.backgroundColor = hex;
//x의 스타일 중, 배경색상을 새로운 hex라는 변수에 들어있는 정보로 변경해준다.

        document.getElementById("code").innerHTML = hex;  
//id가 code인 태그에 접근해, HTML을 hex로 변경한다.
//화면상에 출력된 dd라는 텍스트가 랜덤으로 생성된 숫자코드로 변경된다.

랜덤하게 숫자 생성하기: Math.random()

0~1사이의 소숫점을 포함한 난수를 무작위로 생성한다. 랜덤하게 숫자를 만들고 싶다면 Math.random()을 사용하면된다. 꼭 숫자가 아니더라도 잘 활용하면 랜덤한 결과를 출력할 때 활용할 수 있다.

랜덤하게 생성할 숫자의 범위를 정해주어야한다.

최댓값 : Math.random()*최댓값

//난수의 범위 시작이 0이므로 0*n=0 
// 최대값인 1에만 원하는 최대 범위를 곱하면 된다. 1*n=n이므로, 범위는 0~n

최솟값 : ( Math.random() * ( 최대값 - 최소값 )  ) + 최소값
/*1<x<10의 범위를 만들어주기 위해서는 +1을 해주어야 한다.
그러나 최댓값의 범위에도 +1이 되기 때문에, 최댓값에서 최솟값을 뺀 만큼만 더해준다.

다만, 이 함수는 랜덤한 '정수'를 출력하지는 않는다.
여전히 해당 범위의 소수점을 포함한 난수를 무작위로 생성한다.
따라서 정수의 결과를 얻고 싶다면 다른 함수를 사용해야 한다.
```
Math.floor() : 소수점 이하를 버림
Math.ceil() : 소수점 이하를 올림
Math.round() : 소수점 이하를 반올림
```

        for (var i = 0; i < 5; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
/*
Math.floor() : 소수점 이하를 버림
Math.ceil() : 소수점 이하를 올림
Math.round() : 소수점 이하를 반올림

/*Math.random()*15 : 0~15까지의 랜덤한 난수를 출력
Math.floor(Math.random()*15 : 소숫점 이하를 버림해, 0~15까지의 랜덤한 정수를 출력
number[Math.floor(Math.random()*15] : 랜덤한 정수에 해당하는 number배열의 인덱스의 값을 출력
	예) number[1] : 2
newarr.push(number[Math.floor(Math.random() * 15)]);:newarr 배열의 맨 뒤에 해당 값을 추가

문자열 합치기 : join()

var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
var newarr = []

for (var i=0; i<5; i++) {
	newarr.push((number[Math.floor(Math.random()*15)]))

}
/*[9,6,3,"d",4]
우리가 원하는 #079de3 과 같은 연속된 숫자코드가 아닌, 쉼표로 구분되며 각 숫자와 문자형태로
나타나는 배열의 요소들이 출력된다*/

return "#" + newarr.join("");
/*join은 배열을 구성하는 각각의 요소들을, 하나의 문자열로 변환한다.
위 결과값이 #963d4로 출력된다.
""안에는 구분자가 들어간다. join(" ")(공백)을 입력할 경우 #9 6 3 d 4로 출력된다.

처음에 마주할 땐 막막했는데, 세부적인 단계로 나누어 접근하니
눈앞의 단계부터 해결해나갈 수 있었다.
코드를 작성할 때는 전체적인 그림에서 어떻게 해결할 건지 작게 단계를 나누고,
하나씩 해나가는 습관이 들면 좋을 것 같다.

Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

다음 포스트