본문 바로가기
프런트엔드/JavaScript

JS, 숫자 입력 받아서 3의 배수인 숫자 찾기(+ 합)

by greenyellow-s 2024. 8. 22.
728x90
숫자 입력 받아서 3의 배수인 숫자 찾기(+ 합)

 

실행 이미지

 

조건

1. prompt로 숫자를 입력받는다.

2. 1부터 입력받은 숫자까지 모든 3의 배수를 찾아 나열한다.

3. 총 개수와 합을 구해 출력한다.


HTML 구문

<h2>3의 배수 찾기</h2>
<h3 id="number"></h3>
<div><span id="count"></span><span id="sum"></span></div>

 

JavaScript 구문

let num = prompt("몇 까지 3의 배수를 찾을까요?"); // 고정되야되서

var count = 0;
var sum = 0;
		
var number = document.getElementById("number");
		
for(var i=1; i <= num; i++){
			
	if(i % 3 == 0){
		number.innerHTML += i + ", ";
		sum += i;
		count++;
	}
}

document.getElementById("count").innerText = num + "까지 3의 배수의 개수 : " + count;
document.getElementById("sum").innerText =  num + "까지 3의 배수의 합 : " + sum;

 


해석

 

prompt로 사용자에게 값을 받아온다.

let num = prompt("몇 까지 3의 배수를 찾을까요?");

 

개수와 합을 저장할 변수를 선언하고

해당 숫자들을 출력할 공간을 변수에 저장한다.

var count = 0;
var sum = 0;
		
var number = document.getElementById("number");

 

입력받은 숫자를 1부터 하나씩 증가해서

for(var i=1; i <= num; i++)

 

3의 배수인 숫자가 나오면 div#number에 하나씩 추가한다.

if(i % 3 == 0)

 

div#number 안에 innerHTML을 이용해서 숫자를 넣는다.

+= 을 하면 원래 값이 모두 덮여지는게 아니라 옆에 추가가 된다.

number.innerHTML += i + ", ";

 

합과 개수도 구한다.

sum += i;
count++;

 

저장한 값들을 div에 출력한다.

document.getElementById("count").innerText = num + "까지 3의 배수의 개수 : " + count;
document.getElementById("sum").innerText =  num + "까지 3의 배수의 합 : " + sum;

 

728x90