HTML,CSS, JS/JavaScript

[JavaScript] 9-1. 예제

Song hyun 2024. 7. 22. 11:09
728x90
반응형

[JavaScript] 9-1. 예제

 

(1) 이미지 띄우기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index12.html 파일 입니다.</h2>
    <img src="images/image1.png" alt="">
    <button onclick="toggleImage()">이미지토글</button>
    <script>
        function toggleImage(){
            alert('11111');
        }

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .flex--container{
        display: flex;
    }
</style>
</head>
<body>
    <h2>index12.html 파일 입니다.</h2>
    <div class="flex--container">
        <img src="images/image1.png" alt="">
        <button onclick="toggleImage()" class="image">이미지토글</button>
    </div>
    <script>
        let isImage1=true;
       function toggleImage(){
            const imgElement=document.getElementById("toggleImage");
            if(isImage1){
                imgElement.src="images/image2.png";
            } else {
                imgElement.src="images/image1.png";
            }
            isImage1=!isImage1;
       }

       function toggleImage2(){
            let imageNode=document.getElementById("toggleImage");
            if(imageNode.src.includes("image1.png")){
                imageNode.src="images/image2.png";
            } else {
                imageNode.src="images/image1."
            }

       }

    </script>
</body>
</html>
728x90
반응형