TIL 15. Java Script - [mini_project] Background Change

17181 ワード
Java Script TIL テキストリンク
上記のコードの開講前の学習を行っています.過去3週間、HTML、CSS、Java Script理論の整理を勉強してきましたが、今、勉強中の優秀な先生(?)の助けを得て、実戦練習を同時に行うことができました!最初の課題は「背景色をランダムに変更する」ことです.
ミニプロジェクトの関門ページに移動>

最終結果

  • 初期背景色は白色(#ffffff)
    • である.
  • ボタンをクリックすると、背景色
    • がランダムに変更されます.
  • 背景色を変更するHex Color Codeテキスト
    • を表示

    HTML

    <body style="background-color: #ffffff;">
    <div>
        <h1>Hex Color Code: <span id="hexcode-text"></span></h1>
        <input type="button" value="Change!" id="change-btn" onclick>
    </div>
    <script src="index.js"></script>
</body>

    Java Script

    const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexCodeText = document.getElementById('hexcode-text');
const body = document.querySelector('body');
const button = document.querySelector('#change-btn');
let hexCodeArr = [];

hexCodeText.innerHTML = '#ffffff';

button.addEventListener('click', function () {  

    for(let i=0; i < 6; i++) {
        hexCodeArr[i] = hexNumbers[Math.floor(Math.random() * 16)]
    }  // hex Code가 6자리 이기 때문에 6번 반복을 통해 각 자리 코드를 얻어내 배열로 만듦

    let hexCodeStr = hexCodeArr.join("");  // 만든 배열을 문자열로 변경

    body.style.backgroundColor = `#${hexCodeStr}`; // 배경색에 문자열 값 할당
    hexCodeText.innerHTML = `#${hexCodeStr}`; // 표시할 텍스트에 문자열 값 할당

}, false)

    新知


    :「body」は内蔵オブジェクトです。


    背景色の値を変更するために、const body = document.querySelector('body');が直接生成され、document、Dateオブジェクトのように組み込まれたオブジェクトが生成されます.

    :変数宣言の位置が重要です。


    コードを初めて作成してアクティブにします.最初に[バックグラウンドカラーを変更](Change Background Color)ボタンをクリックすると、
    背景色の変化がなく、表示されているHex Color Codeテキストも表示されていないエラーがあります.

    問題は,繰返し文からなる6ビットhexCodeArr配列を文字列に変換するために,hexCodeStr変数を宣言したことである.下図に示すように、最初に二文にhexCodeStrと書きました.このため、ボタンを初めてクリックしたときにhexCodeArrが作成されず、何の内容もない空の文字列となり、問題が発生した.
    Java Script
    const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexCodeText = document.getElementById('hexcode-text');
const body = document.querySelector('body');
const button = document.querySelector('#change-btn');
let hexCodeArr = [];

hexCodeText.innerHTML = '#ffffff';

button.addEventListener('click', function () {  

    // 최초 hexCodeStr 변수 선언 위치 
  
    for(let i=0; i < 6; i++) {
        hexCodeArr[i] = hexNumbers[Math.floor(Math.random() * 16)]
    }  
  
    let hexCodeStr = hexCodeArr.join(""); 
    // 반복문으로 배열을 먼저 만든 후 문자열로 변경하도록 변수 선언 위치 수정

    body.style.backgroundColor = `#${hexCodeStr}`; 
    hexCodeText.innerHTML = `#${hexCodeStr}`; 

}, false)
    思ったより簡単な問題だが、残念ながら自分では解決できない.ますます心配になってきたようです!
    influxDB v0.11クラスタ構成
    Javaバイナリ演算