[자바스크립트] div id의 텍스트 값을 받아서 연산.

답변을 달려고 했는데 5분차이로 누가 벌써 답을 달아서 여기에 올린다.

 

1. HTML

 

<div id="num">
7 9 4 7 2 </br>
3 4 6 7 2 </br>
3 2 6 9 8
</div>
</p>
<input type="button" value="계 산" onclick="calc()" />
</p>
 
<div id="result3" value="">3의 갯수는 ? </div>
<div id="result4">4의 갯수는 ? </div>
<div id="result7">7의 갯수는 ? </div>
<div id="resultH">3의 개수, 4의 개수, 7의 숫자 갯수는 ? </div>
<div id="resultEx"></br>그 외 숫자의 갯수는 ? </div>

<div id="result">위 모든 숫자의 총 합은 ? </div>
</p>

기타 방법 : </br>

 

 

 

2. SCRIPT

 

function calc(){
   
    var renum3 = 0;
    var renum3h = 0;
    var renum4 = 0;
    var renum4h = 0;
    var renum7 = 0;
    var renum7h = 0;
   
    var renumHH = 0;
    var renumSH = 0;
   
    var renumEx = 0;
    var renumExH = 0;
    var reout = 0;
   
    var num = document.getElementById("num").textContent;
    var renum = new Array();
   
    renum = num.split(" ");
    // alert(renum[0] + " / " + renum.length);
    // alert(renum[1] + " / " + renum.length);
    // alert(renum[2] + " / " + renum.length);
    // document.write(renum.toString(), '<br /><br />');

    /*
    if(/[^0123456789]/g.test(num.value)) {
        alert("숫자가 아닙니다.\n\n0-9의 정수만 허용합니다.");
        loc.value = "";
        loc.focus();
    }
    */

    for(var i = 0;i < parseInt(renum.length);i++){
        if(renum[i] == 3){
            renum3++;
            renum3h += 3;
        }else if(renum[i] == 4){
            renum4++;
            renum4h += 4;
        }else if(renum[i] == 7){
            renum7++;
            renum7h += 7;  
        }else{
            renumEx++;
            renumExH += parseInt(renum[i]);
        }
            // reout += renum[i] + " ";
            reout = parseInt(reout) + parseInt(renum[i]);
    }
    document.getElementById("result3").innerHTML =

"3의 갯수는 ? <font color='red'>" + renum3 + "</font> 개 / 합은 ? <font color='blue'>" + renum3h + "</font>";
    document.getElementById("result4").innerHTML =

"4의 갯수는 ? <font color='red'>" + renum4 + "</font> 개 / 합은 ? <font color='blue'>" + renum4h + "</font>";
    document.getElementById("result7").innerHTML =

"7의 갯수는 ? <font color='red'>" + renum7 + "</font> 개 / 합은 ? <font color='blue'>" + renum7h + "</font>";

    renumHH = renum3 + renum4 + renum7;
    renumSH = renum3h + renum4h + renum7h;
   
 document.getElementById("resultEx").innerHTML =

"그 외 숫자의 갯수는 ? <font color='red'>" + renumEx + "</font> 개 / 합은 ? <font color='blue'>" + renumExH + "</font>";
   
 document.getElementById("resultH").innerHTML =

"3의 개수, 4의 개수, 7의 숫자 갯수는 ? <font color='blue'>" + renumHH + "</font></br> 3의 개수, 4의 개수, 7의 개수의 총합 ? <font color='blue'>" + renumSH + "</font>";
   
    document.getElementById("result").innerHTML =

"위 모든 숫자의 총 합은 ? <font color='green'>"+ reout + "</font>";
}

 

// 먼저 달린 답변.

var n = [[7, 9, 4, 7, 2]
      ,[3, 4, 6, 7, 2] 
      ,[3, 2, 6, 9, 8]];
var cnt3 = 0;
var cnt4 = 0;
var cnt7 = 0;
for(var i=0; i<n.length; i++){
     for(var j=0; j<n[i].length; j++){
            if(n[i][j]==3) cnt3++;
            if(n[i][j]==4) cnt4++;
            if(n[i][j]==7) cnt7++;
     }
}
document.write('3의개수 :'+cnt3+'<Br>');
document.write('4의개수 :'+cnt4+'<Br>');
document.write('7의개수 :'+cnt7+'<Br>');
document.write('총합:'+(cnt3+cnt4+cnt7));

 

 

 

3. 실행 결과

 

 

 

 

4. 테스트 링크 : http://jsfiddle.net/wq6pgnjf/35/