주니오주니
180
2020-10-27 22:35:39 작성 2020-10-27 22:36:49 수정됨
11
360

자바스크립트 질문이요!! 도와주세요 ㅠㅠ


화면 전환하는걸 시도해볼려고 합니다. 출력 누르면 외부js파일에서 계산되서 id = x에는 0~30값 넣어놓고, id = y는 30 ~ 60 넣고, id = z 는 60 ~90을 넣어놓게 되고, 그러면 젤 처음에 출력 누르면 id = x먼저 출력되고 버튼 누르는거에 따라 div id 값이 계속 바뀌게 하면서 화면 바뀌는것 처럼 싶은데 어떻게 해야할까요?

//외부js파일

function btn() {

 var arr = [];

    for (var a = 0; a < 100; a++) {

        arr[a+1] = a;

 

for(var b =0; b<30; b++){

var str1 = arr[b+1]+"<br>";

document.getElementById("x").innerHTML = str1;

}

for(var c =30; c<60; c++){

var str2 = arr[c+1]+"<br>"; 

document.getElementById("y").innerHTML = str2;

}

for(var d =60; d<90; d++){

var str3 = arr[d+1]+"<br>"; 

document.getElementById("z").innerHTML = str3;

}

}

//main.html

<div id = 'x'></div>

<button onclick ="btn()">출력</button>

<button onclick ="first()">f</button>

<button onclick ="second()">s</button>

<button onclick ="third()">t</button>

 

 

        <script> //

            var content = document.getElementById("x");

            function first() {

                content.setAttribute("id", "x");

            }

            function second() {

                content.setAttribute("id", "y");

            }

            function third() {

                content.setAttribute("id", "z");

            }

        </script>

몇시간동안 고민하고 있네요..




















질문 하나만 더 하겠습니다.

function caculation(){
연산...

}

function a1(){
for(var a=0; a<10; a++){
출력내용1

}

}

 

function a2(){
for(var a=0; a<10; a++){
출력내용2

}

}

 

function a3(){
for(var a=0; a<10; a++){
출력내용3

}

}

a1에서 caculation 함수에 있는 연산 값을 사용하고 싶어서 a1에 caculation(); 넣어봤는데 안되네요.

0
  • 답변 11

  • 초보자1212
    1k
    2020-10-27 22:54:05

    첫 번째 질문은 무슨 뜻인지 이해가 안되네요;

    두 번째 질문은 자바스크립트의 스코프에 대해 알아보시기 바랍니다.

  • 주니오주니
    180
    2020-10-27 23:05:12

    같은 화면에 버튼을 누르면 거기에 계산 된 값들이 출력되는 것입니다.

    그러기 위해서 setAttribute를 써서 div id = x의 값을 변경을 해주었습니다.

  • 초보자1212
    1k
    2020-10-27 23:12:19

    아아, 일단 innerHTML 을 = 가 아닌 += 로 하셔야할 것으로 보이네요

    지금은 항상 마지막 값으로 덮어쓰고 있습니다

  • 초보자1212
    1k
    2020-10-27 23:22:31

    올려주신 스샷으로는 1...30 까지 다 표현되는거로 보이는데요..

    혹시 그냥 a 부터 b 사이에 있는 숫자를 랜덤하게 뽑고 싶으시다는건가요

  • 초보자1212
    1k
    2020-10-27 23:27:19 작성 2020-10-27 23:27:43 수정됨

    일단 setAttribute 로는 뭔가 하시기 힘들텐데,

    개발 용어를 사용하지 않으시는채로

    상황이 어떤데 뭘 어떻게하면 어떤 값이 어떻게나와서 그래서 화면이 어떻게 보였음 좋겠다를 

    조금만 알기 쉽게 풀어서 설명해주시면 도움이 될 것 같습니다

  • 초보자1212
    1k
    2020-10-27 23:38:18

    1. id 가 y, z 인 div 는 현재 어딨나요

    2. 그 출력된다는게 어느 DOM 에 출력이 된다는건가요

  • 초보자1212
    1k
    2020-10-27 23:40:48

    일단 이해가 안가는게 div#x 의 아이디를 y 로 왜 바꾸시는지네요..

    아이디를 바꾸면 뭔가 자동으로 일어나겠지? 자동으로 뭔가 되어야겠지? 라고 생각을 하신것인지 아니면 다른 의도가 있으신건지..

    일단 현재 보여주신 코드 기준으로는 그 뭐가됐든 자동으로 일어나지는 않을겁니다.

    대신 btn() 을 실행하면 오류가 터지겠죠

  • 초보자1212
    1k
    2020-10-27 23:44:39

    그냥 느낌대로 이해하자면


    키보드 F 를 누르면 숫자 0~30 이 div 에 보여지고,

    키보드 S 를 누르면 숫자 31~60 이 div 에 보여지고,

    키보드 T 를 누르면 숫자 61~90 이 div 에 보여지는것이라고 이해했는데요.



    const f = new Array(31).fill(0).map((_, i) => i + 0);
    const s = new Array(30).fill(0).map((_, i) => i + 31);
    const t = new Array(30).fill(0).map((_, i) => i + 61);
    
    const div = document.getElementById('x');
    
    function btn(v) {
      div.textContent = v;
    }
    
    function first() {
      btn(f);
    }
    
    function second() {
      btn(s);
    }
    
    function third() {
      btn(t);
    }


    이런 느낌으로 하시면 됩니다

  • 초보자1212
    1k
    2020-10-27 23:45:36

    주니오주니

    setAttribute 로는 원하시는대로 하실 수 없당께요.

    https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

    요기를 함 참고해보시는걸 추천합니다

    setAttribute 를 죽어도 나는 써야겠다. 하시면 로직을 수정해서 추가 작업을 하셔야합니다.


  • 주니오주니
    180
    2020-10-27 23:53:21 작성 2020-10-27 23:53:55 수정됨

    설명하기가 힘들어서 그런데 본문으로 확인 좀 해주시겠습니까?

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script src="js/LOTTO.js"></script>
            <style>
                .form {
                    width1001px;
                    margin400px auto;
                    text-aligncenter;
                }

                .content {
                    border1px solid black;
                    width300px;
                    height400px;
                    floatleft;
                }
                #content_right_1#content_right_2#content_right_3#content_right_4 {
                    width500px;
                    overflowauto;
                }
                button {
                    margin5px;
                    width200px;
                }
                input {
                    margin-bottom10px;
                }
                #menu {
                    width100px;
                }
                .side_button {
                    width50px;
                }
            </style>

        </head>
        <body>
            <div class="form">
                <div class="content">
                    <div>
                        <h1>LOTTO</h1>
                        <h3>연산횟수</h3>
                        <input type="text" id="num">
                    </div>

                    <div>
                        <button onclick="count()">출력</button>
                    </div>
                </div>

                <div class="content" id="content_right_1"></div>
                <div class="content" id="menu">
                    <div>
                        <button onclick="count_1()" class="side_button">전체 출력</button>
                    </div>
                    <div>
                        <button onclick="count_2()" class="side_button">중복 출력</button>
                    </div>
                    <div>
                        <button onclick="count_3()" class="side_button">비율 출력</button>
                    </div>
                    <div>
                        <button onclick="count_4()" class="side_button">최대 출력</button>
                    </div>

                </div>

            </div>
            <script>
                var content = document.getElementById("content_right_1");
                function count_1() {
                    content.setAttribute("id""content_right_1");
                }
                function count_2() {
                    content.setAttribute("id""content_right_2");
                }
                function count_3() {
                    content.setAttribute("id""content_right_3");
                }
                function count_4() {
                    content.setAttribute("id""content_right_4");
                }
            </script>
        </body>
    </html>
























    function count() {
        var number = document
            .getElementById("num")
            .value;
        var empty = new Array();
        var same = new Array();
        var percent = new Array();
        var count = 0;
        for (var a = 1a <= numbera++) {
            var result = Math.floor(Math.random() * (45)) + 1;
            empty[a] = result//empty = [a,b,c,..100]

        }

        for (var c = 1c <= 45c++) {

            for (var b = 1b <= empty.lengthb++) {
                if (empty[b] == c) {
                    same[c] = ++count// 선으로 카운트 하고 same 배열에 대입해야됨.
                }
            }
            count = 0;
        }

        //횟수에 따른 결과 값
        var f =1;
        var str = "<table border=1>";
        for (var z = 0z < empty.length / 5 - 1z++) {
            str += "<tr>";
            for (var y = 0y < 5y++) {
                str += "<td>";
                str += "(" + f + ") :" + empty[f] + "<br>";
                str += "</td>";
                f++;
            }
            str += "</tr>";
        }
        str += "</table>";
        
        document.getElementById("content_right_1").innerHTML = str;
        

        var g = 1;
        var str1 = "<table border=1>";
        for (var j = 0j < 9j++) {
             str1 += "<tr>";
            for (var h = 0h < 5h++) {
                str1 +="<td>";
                str1 +="(" + g + ")의 중복개수:" + same[g] + "<br>";
                str1 +="</td>";
                g++;
            }
            str1 +="</tr>";
        }
        str1 +="</table>";
        document.getElementById("content_right_2").innerHTML = str1;

        //비율값

        var i = 1;
        var str2 = "<table border=1>";
        for (var j = 0j < 9j++) {
             str2 += "<tr>";
            for (var h = 0h < 5h++) {
                percent[i] = same[i] / empty.length * 100;
                 str2 += "<td>";
                 str2 += i + "의 비율" + percent[i].toFixed(5) + "<br>";
                 str2 += "</td>";
                i++;
            }
             str2 += "</tr>";
        }
         str2 += "</table>";
         document.getElementById("content_right_3").innerHTML = str2;

        //가장 많이 나온수 6개 출력

        var same_copy = [].concat(same); //same 복제
        same_copy.sort(function (ab) {
            return b - a;
        }); //same 복제본 내림차순으로 정렬
        var str3 = "<table border = 1>";
         str3 +="<tr>";
        for (var x = 0x < 6x++) {
            var space = same.indexOf(same_copy[x]);
            delete same[space];
             str3 +="<td>";
             str3 +=space + "번 횟수: " + same_copy[x] + "<br>";
             str3 +="</td>";
        }
         str3 +="</tr>";
         str3 +="</table>";
         document.getElementById("content_right_4").innerHTML = str3;

    }
  • 성능최적화계획
    246
    2020-10-28 09:26:32

    저도 아직은 배울게 많지만 일단 스크립트 부분만 올려봐여...

    일단 기존 올려주신 걸로 돌리면 스크립트 오류나여ㅠㅠ 그래서 스크립트 오류 이후의 코드는 실행이 되지 않습니다. F12눌러서 확인해 보시면 됩니당

    버튼에 대한 액션을 하려면 분기를 태우는게 맞을거 같아여...저도 완벽한 것은 아니지만 

    우측 버튼을 눌렀을 때 값을 가지고 있어서 조건을 태우거나 아니면 해당 div까지 찾아가 id를 확인해야 겠네여


    월급루팡 중이랑 횡설수설 했네여!!ㅎㅎ


    <script>
    var content = document.getElementById("content_right_1");
    var btnType = "";
    function count_1() {
    	content.setAttribute("id", "content_right_1");
    	btnType = "content_right_1";
    }
    function count_2() {
    	content.setAttribute("id", "content_right_2");
    	btnType = "content_right_2";
    }
    function count_3() {
    	content.setAttribute("id", "content_right_3");
    	btnType = "content_right_3";
    }
    function count_4() {
    	content.setAttribute("id", "content_right_4");
    	btnType = "content_right_4";
    }
    			
    function count() {
        var number = document
            .getElementById("num")
            .value;
        var empty = new Array();
        var same = new Array();
        var percent = new Array();
        var count = 0;
        for (var a = 1; a <= number; a++) {
            var result = Math.floor(Math.random() * (45)) + 1;
            empty[a] = result; //empty = [a,b,c,..100]
    
        }
    	
        for (var c = 1; c <= 45; c++) {
            for (var b = 1; b <= empty.length; b++) {
                if (empty[b] == c) {
                    same[c] = ++count; // 선으로 카운트 하고 same 배열에 대입해야됨.
                }
            }
            count = 0;
        }
    	
    	if(btnType == "content_right_1") {
    		//횟수에 따른 결과 값
    		var f =1;
    		var str = "<table border=1>";
    		for (var z = 0; z < empty.length / 5 - 1; z++) {
    			str += "<tr>";
    			for (var y = 0; y < 5; y++) {
    				str += "<td>";
    				str += "(" + f + ") :" + empty[f] + "<br>";
    				str += "</td>";
    				f++;
    			}
    			str += "</tr>";
    		}
    		str += "</table>";
    		
    		document.getElementById(btnType).innerHTML = str;
    		
    	} else if(btnType == "content_right_2") {
    		var g = 1;
    		var str1 = "<table border=1>";
    		for (var j = 0; j < 9; j++) {
    			 str1 += "<tr>";
    			for (var h = 0; h < 5; h++) {
    				str1 +="<td>";
    				str1 +="(" + g + ")의 중복개수:" + same[g] + "<br>";
    				str1 +="</td>";
    				g++;
    			}
    			str1 +="</tr>";
    		}
    		str1 +="</table>";
    		document.getElementById(btnType).innerHTML = str1;
    
    	} else if(btnType == "content_right_3") {
    		//비율값
    
    		var i = 1;
    		var str2 = "<table border=1>";
    		for (var j = 0; j < 9; j++) {
    			 str2 += "<tr>";
    			for (var h = 0; h < 5; h++) {
    				percent[i] = same[i] / empty.length * 100;
    				 str2 += "<td>";
    				 str2 += i + "의 비율" + percent[i].toFixed(5) + "<br>";
    				 str2 += "</td>";
    				i++;
    			}
    			 str2 += "</tr>";
    		}
    		 str2 += "</table>";
    		 document.getElementById(btnType).innerHTML = str2;
    
    	} else if(btnType == "content_right_4") {
    		//가장 많이 나온수 6개 출력
    
    		var same_copy = [].concat(same); //same 복제
    		same_copy.sort(function (a, b) {
    			return b - a;
    		}); //same 복제본 내림차순으로 정렬
    		var str3 = "<table border = 1>";
    		 str3 +="<tr>";
    		for (var x = 0; x < 6; x++) {
    			var space = same.indexOf(same_copy[x]);
    			delete same[space];
    			 str3 +="<td>";
    			 str3 +=space + "번 횟수: " + same_copy[x] + "<br>";
    			 str3 +="</td>";
    		}
    		 str3 +="</tr>";
    		 str3 +="</table>";
    		 document.getElementById(btnType).innerHTML = str3;
    	}
    }
    </script>
  • 로그인을 하시면 답변 을 등록할 수 있습니다.