[JavaScript] 9-1. 예제

2024년 07월 22일

Song hyun
작성자
2024.07.22.: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

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 11. EventListener (0)	2024.07.26
[JavaScript] 10. 자바스크립트의 이벤트 처리 (0)	2024.07.24
[JavaScript] 9. DOM(Document Object Model) (0)	2024.07.22
[JavaScript] 8. 함수의 개념과 활용 (0)	2024.07.19
[JavaScript] 7. 배열의 개념과 사용 방법 (0)	2024.07.19

다음 글이 없습니다.

이전 글이 없습니다.

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바