(11)HackerRank- Day 8: Create a Button、 Buttons Container(javaScript Answer)

第 11 屆 iThome 鐵人賽

DAY 10

Software Development

用JS來刷刷HackerRank系列第 10 篇

11th鐵人賽

theRookie

2019-09-27 08:58:24

1045 瀏覽

題目
Day 8: Create a Button

解析
按鈕按一次當中顯示的數字+1
我們輕輕鬆鬆的來

window.onload = () => {
     const button = document.getElementById('btn');
     button.addEventListener('click', (e) => {
          const clicks = parseInt(e.currentTarget.innerText, 0) + 1;
          e.currentTarget.innerText = clicks;
     });  
}

button{
    display:block;
    width  :96px;
    height  :48px;
    font-size  :24px;
}

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Button</title>
        <link rel="stylesheet" href="css/button.css" type="text/css">
    </head>
    <body>
        <button id="btn">0</button>
         <script src="js/button.js" type="text/javascript"></script>
    </body>
</html>

題目
Day 8: Buttons Container

解析
這題重點在於每按一次所有數字以五為準
順時針轉一格
我也想過用陣列操控
但實在很難避免undefined
跟要對5做特別處理實在麻煩
反正也才九的數字
土法煉鋼，直接開幹吧

  window.onload = () => {
    let btn5 = document.getElementById("btn5");
    btn5.addEventListener("click", function() {
        let arr = [
            document.getElementById('btn1').innerText,
            document.getElementById('btn2').innerText,
            document.getElementById('btn3').innerText,
            document.getElementById('btn6').innerText,
            document.getElementById('btn9').innerText,
            document.getElementById('btn8').innerText,
            document.getElementById('btn7').innerText,
            document.getElementById('btn4').innerText
        ];
        arr = [
            ...arr.slice(arr.length - 1),
            ...arr.slice(0, arr.length - 1)
        ];
        document.getElementById('btn1').innerText = arr[0];
        document.getElementById('btn2').innerText = arr[1];
        document.getElementById('btn3').innerText = arr[2];
        document.getElementById('btn6').innerText = arr[3];
        document.getElementById('btn9').innerText = arr[4];
        document.getElementById('btn8').innerText = arr[5];
        document.getElementById('btn7').innerText = arr[6];
        document.getElementById('btn4').innerText = arr[7];
    })
}

#btns {
     display: block;
     overflow: hidden;
     width: 75%;
}
#btns button {
     display: block;
     width: 30%;
     float: left;
     height: 48px;
     font-size: 24px;    
}

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Buttons Grid</title>
         <link rel="stylesheet" href="css/buttonsGrid.css" type="text/css">
    </head>
    <body>
        <div id="btns">
            <button id="btn1">1</button>
            <button id="btn2">2</button>
            <button id="btn3">3</button>
            <button id="btn4">4</button>
            <button id="btn5">5</button>
            <button id="btn6">6</button>
            <button id="btn7">7</button>
            <button id="btn8">8</button>
            <button id="btn9">9</button>
        </div>
         <script src="js/buttonsGrid.js" type="text/javascript">
    </body>
</html>

本日心得