JavaScript 5

서현우·2022년 3월 14일
0

JavaScript

목록 보기
5/11
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function test(){
            //alert("안녕");
            //document.getElementById("txt").value ="반갑습니다."
            document.querySelector("#txt").value="hi"
           // alert(document.getElementById("txt").value)
        }
        function changeColor(){
            document.bgColor="yellow"
        }
        function test1(str){
            alert(str);
        }
        function changeStyle(){
            document.getElementById('p1').style.backgroundColor='red';
            document.getElementById('p1').style.color='white'
            document.getElementById('p1').style.fontStyle='italic'
        }
        function gugudan(){
            var str ="";
            for(i=1; i<10;i++){
               // str =str + "2*"+i+"="+2*i+"<br/>";
               str += "2*"+i+"="+2*i+"<br/>";
               //document.write("2*"+i+"="+2*i+"<br/>")
            }
            document.getElementById("result").innerHTML =str
            //document.getElementById('result').style.backgroundColor='red';
        }
        function guguCal(){
            d = document.getElementById("dan").value;
            var str ="";
            for(i=1; i<10;i++){
                str += d+"*"+i+"="+d*i+"<br/>";
            }
            document.getElementById("guguResult").innerHTML =str   
        }

    </script>
</head>
<body>
    <input type="text" id="txt"/><br/>
    <input type="button" value="test" onclick="test()"/>
    <input type="button" value="test1" onclick="test1('안녕')"/>
    <input type="button" value="test2" onclick="test1('안녕22222')"/>
    <input type="button" value="변경" onclick="changeColor()"/>
    <button onclick="test()">버튼test 호출</button>
    <hr/>
    <p id="p1">여기를 변경합니다.</p>
    <input type="button" value="클릭" onclick="changeStyle()"/>
    <input type="button" value="2단" onclick="gugudan()"/>
    <div id="result"></div> 
    <hr/>

    단 : <input type="text" id="dan" size="5" />
    <input type="button" value="구구단" onclick="guguCal()"/>
    <div id="guguResult"></div>
</body>
profile
안녕하세요!!

0개의 댓글