How to Change Images using by Javascript | Apple Website Design

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers

HTML and JavaSCript Code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">

    <div class="container">

            <div class="box-1">

                <img src="/img/default.jpeg" alt="" class="main-image">


            <div class="box-2">

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-1.png" alt="">

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-2.png" alt="">

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-3.png" alt="">




        const iphoneList = document.querySelector('.box-2').children;

        function iphonechangeonClick(event){

            for(let i = 0; i< iphoneList.length; i++){



CSS Code

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;

    width: 400px;
    height: auto;

    border: 2px solid grey;
    margin: 5px;
    border-radius: 6px;

.box-2 .childof-box-2 img{
    width: 100px;
    height: auto;
    border: 2px solid royalblue;
Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers