鐵人賽 Day24 -- JavaScript 初體驗(二) -- 點擊後換圖片

13th鐵人賽

SKYDOG

2021-09-24 10:21:10

3684 瀏覽

分享至

前言

最近因為上班進度緩慢，所以內容比較慢，但應該也只能這樣了哈哈，我們今天也一樣會用到 Onclick
那我們之前也有使用 JQuery 的 Onclick 事件，
可以看一下這篇 -->https://ithelp.ithome.com.tw/articles/10263014

點擊後變換圖片

當這個圖片被滑鼠點選的時候，就會在圖片之間切換

先找三張大小差不多的照片，那我的照片名稱分別是(阿你們就自己命名蛤)
一、 iphone13.jpg
二、 iphone13-0.jpg
三、 iphone13-1.jpg

一樣將下方程式存在min.js中(昨天的記得刪掉)

min.js

var myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/iphone13.jpg') {
      myImage.setAttribute ('src','images/iphone13-0.jpg');
    } else {
      myImage.setAttribute ('src','images/iphone13-1.jpg');
    }
}

querySelector 昨天也有講過了，大家可以複習一下昨天的鐵人賽
使用 onclick 後再用簡單的 if else 去判斷就可以啦(在下方附上html)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <style>
      .a{
        display: flex;
        width: auto;
        height: 550px;
        justify-content: center;
        align-items: center;      
      }
      .b{
        border: #000 2px solid;
        width: 650px;
        background-color: rgb(255, 104, 104);
      }
      .b h1{
        text-align: center;
      }
      .b .img1{
        width: 580px;
        height: 270px;
        margin-left: 35px;
        margin-bottom: 25px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
          <h1>Apple 新機發表</h1>
          <img src="images/iphone13.jpg" class="img1">
          <script src="scripts/main.js"></script>     
      </div>     
    </div>
 </body>
</html>

就先這樣哈哈，明天在奮戰，我們鐵人賽Day25見囉!!