루프에 대한 간단한 5 줄 JavaScript 곱셈표를 만드는 방법

타일러

나는 현재이 프로젝트에서 어려움을 겪고 있습니다. 온라인에서 다양한 검색을 통해 어디로 가는지 알지 못하기 때문에 다른 답변을 얻으므로 현재 가지고있는 코드가 거의 정확하지 않습니다. 곱셈표는 1-10이고 곱셈 답은 최대 5 개까지 표시됩니다. (1x1 = 1, 1x2 = 2, 의미가있는 경우 최대 5x10까지) 올바른 코드 예제가 필요합니다.

<!DOCTYPE html>
<html>
<head>
	<title>Multiplication Tables</title>
</head>
<body>
	<p>Enter a number below to see its multiplication table.</p>
	<input type="text" name="txtNumber" id="txtNumber" placeholder="Enter a number" />
	<br />
	<br />
	
	<button onclick="DisplayTable();">Click Me</button>
	<div id="multiTable"></div>
	
<script language="javascript">
function DisplayTable(){
	for (var i = 1; i <= 10; i++){
  for (var i = 1, var j = 0; (i+j) <= 10; i++, j += i) {
     System.out.print("\t"+i*j);
  System.out.println(); 
}
}
}
</script>

</body>
</html>

필립

1) 자바 스크립트 삽입 / 포함시 , 후자는 표준 코드가 아니므로 type="text/javascript"대신 사용하십시오 language="javascript".

2) 이미 주석에서 언급했듯이 var i = 1두 번째 for 루프 ( )에서 첫 번째 for 루프 ( ) 의 카운터를 재정의하려고합니다 var i = 1, var j = 0. i외부 for루프와 j내부 / 두 번째 for루프 에만 카운터 를 사용하는 것이 좋습니다 . ( i카운터는 이미 두 루프 모두에서 사용할 수 있으며 여기서 재설정하지 않으려 고합니다.)

3) System.out.printSystem.out.printLn자바 스크립트 기능하지 않습니다. Javascript에 해당하는 것은 document.write("Some text");. 그러나이 함수는 페이지가로드 된 후 호출 할 때 모든 HTML을 지우므로 권장되지 않습니다 (이 경우). 따라서 대신 Javascript 함수에서 생성 된 HTML 코드를 저장하는 문자열 변수를 사용하십시오. 그런 다음 Javascript 함수가 루프의 모든 반복에서 새 테이블 행 / 셀을 추가하도록합니다 for.

4) HTML로 표를 만들 때를 사용하지 말고 \t대신 <table>표 행 ( <tr>) 및 표 셀 ( <td>) 함께 적절한 태그 를 사용하십시오 .

5) 하나의 input필드로 무엇을하고 싶은지 불분명합니다 . input사용자가 곱셈 (행과 열)으로 시작하고 끝낼 위치를 선택할 수 있도록 's 를 사용하고 싶다고 생각했습니다 . 이 경우 4 개의 input필드 (고유 ID 포함)가 필요합니다. 이 4 개의 값은 자바 스크립트 함수의 시작 부분에서 가져 와서 for루프의 시작점과 끝점으로 사용합니다 .

예:

function DisplayTable(){
  /* first, get the values of the input fields and parse them as integers */
  var colStart = parseInt(document.getElementById("startCol").value);
  var colEnd = parseInt(document.getElementById("endCol").value);
  var rowStart = parseInt(document.getElementById("startRow").value);
  var rowEnd = parseInt(document.getElementById("endRow").value);
  
  /* create a buffer variable for the new html code & put a opening table tag in it (with a border for clearity) */
  var htmlBuffer = "<table border='1'>";
  
  for (var i = rowStart; i <= rowEnd; i++){
    /* add a opening table row tag to the buffer */
    htmlBuffer += "<tr>";
    
    for (var j = colStart; j <= colEnd; j++) {
      /* add a table cell with the multiplication inside it to the buffer */
      htmlBuffer += "<td>"+ (i*j) + "</td>";
    }
    
    /* add a closing table row tag to the buffer */
    htmlBuffer += "</tr>";
  }
  
  /* add a closing table tag to the buffer */
  htmlBuffer += "</table>";
  
  /* print/put generated html code inside the DIV element */
  document.getElementById("multiTable").innerHTML = htmlBuffer;
}
<p>Fill in the numbers below and click "Generate table" to see their multiplication table.</p>
    Start columns with:<br />
	<input type="text" name="startCol" id="startCol" placeholder="Enter a number" value="1" /><br />
    End columns with:<br />
	<input type="text" name="endCol" id="endCol" placeholder="Enter a number" value="20" /><br />

    <br />

    Start rows with:<br />
	<input type="text" name="startRow" id="startRow" placeholder="Enter a number" value="1" /><br />
    End rows with:<br />
	<input type="text" name="endRow" id="endRow" placeholder="Enter a number" value="10" /><br />

    <br />
	<br />
	
	<button onclick="DisplayTable();">Generate table</button>
    <br />
	<div id="multiTable"></div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

(n * m)에 대한 곱셈표를 일반화하는 방법

분류에서Dev

간단한 진행률 표시 줄 만드는 방법

분류에서Dev

Julia에서 한 줄에 두 개의 중첩 for 루프를 만드는 방법

분류에서Dev

함수에 대한 루프를 만드는 방법

분류에서Dev

내 암호에 대한 while 루프를 만드는 방법

분류에서Dev

장기 실행 Javascript 루프에 대한 UI를 차단하는 방법

분류에서Dev

Python 2.7에서 간단한 그래프를 만드는 방법

분류에서Dev

Pandas에서 간단한 빈도 표를 만드는 방법

분류에서Dev

나는 PHP에서 행렬 곱셈 코드를 만들려고하지만 행렬 곱셈 대신 행과 열로 간단한 곱셈이 발생합니다.

분류에서Dev

Java에서와 같이 병렬 for 루프를 만드는 간단한 Python 3 방법이 있습니까?

분류에서Dev

rstudio에서 루프를 사용하여 "visRemoveNodes"에 대한 코드를 줄이는 방법

분류에서Dev

x => x.List에 대한 간단한 표현식 트리를 만드는 방법

분류에서Dev

JS에서 1 초 지연으로 한 줄씩 for 루프 로그를 만드는 방법

분류에서Dev

Python에서 간단한 플래그를 만드는 방법

분류에서Dev

Android Studio에서 Shape를 만드는 가장 간단한 방법

분류에서Dev

Clojure에서 간단한 사용자 프롬프트를 만드는 방법

분류에서Dev

비동기 요청에 대한 for 루프를 중지하는 방법 Swift 5

분류에서Dev

코드 줄에 대한 복제본을 만드는 방법

분류에서Dev

JavaScript 곱셈표를 만드는 방법은 무엇입니까?

분류에서Dev

하나를 제외한 모든 공간에 대해 새 줄을 만드는 방법은 무엇입니까?

분류에서Dev

한 줄에 단어를 세는 방법

분류에서Dev

객체에 대한 참조를 반환하는 멤버 함수를 만드는 가장 간단한 방법

분류에서Dev

JavaScript에서 간단한 GraphQL 쿼리를 수행하는 방법

분류에서Dev

Javascript에 대한 루프를 중지하는 방법은 무엇입니까?

분류에서Dev

JavaScript에서 다양한 이벤트에 대한 단일 이벤트 핸들러를 만드는 방법

분류에서Dev

배열 배열에서 JavaScript 사전을 만드는 간단한 방법

분류에서Dev

Swift를 사용하여 iOS 앱에 대한 간단한 탐색보기를 만드는 방법

분류에서Dev

배열에 무한 루프를 만드는 방법

분류에서Dev

Scala에서 간단한 일시 중지 / 시간 초과를 만드는 방법

Related 관련 기사

  1. 1

    (n * m)에 대한 곱셈표를 일반화하는 방법

  2. 2

    간단한 진행률 표시 줄 만드는 방법

  3. 3

    Julia에서 한 줄에 두 개의 중첩 for 루프를 만드는 방법

  4. 4

    함수에 대한 루프를 만드는 방법

  5. 5

    내 암호에 대한 while 루프를 만드는 방법

  6. 6

    장기 실행 Javascript 루프에 대한 UI를 차단하는 방법

  7. 7

    Python 2.7에서 간단한 그래프를 만드는 방법

  8. 8

    Pandas에서 간단한 빈도 표를 만드는 방법

  9. 9

    나는 PHP에서 행렬 곱셈 코드를 만들려고하지만 행렬 곱셈 대신 행과 열로 간단한 곱셈이 발생합니다.

  10. 10

    Java에서와 같이 병렬 for 루프를 만드는 간단한 Python 3 방법이 있습니까?

  11. 11

    rstudio에서 루프를 사용하여 "visRemoveNodes"에 대한 코드를 줄이는 방법

  12. 12

    x => x.List에 대한 간단한 표현식 트리를 만드는 방법

  13. 13

    JS에서 1 초 지연으로 한 줄씩 for 루프 로그를 만드는 방법

  14. 14

    Python에서 간단한 플래그를 만드는 방법

  15. 15

    Android Studio에서 Shape를 만드는 가장 간단한 방법

  16. 16

    Clojure에서 간단한 사용자 프롬프트를 만드는 방법

  17. 17

    비동기 요청에 대한 for 루프를 중지하는 방법 Swift 5

  18. 18

    코드 줄에 대한 복제본을 만드는 방법

  19. 19

    JavaScript 곱셈표를 만드는 방법은 무엇입니까?

  20. 20

    하나를 제외한 모든 공간에 대해 새 줄을 만드는 방법은 무엇입니까?

  21. 21

    한 줄에 단어를 세는 방법

  22. 22

    객체에 대한 참조를 반환하는 멤버 함수를 만드는 가장 간단한 방법

  23. 23

    JavaScript에서 간단한 GraphQL 쿼리를 수행하는 방법

  24. 24

    Javascript에 대한 루프를 중지하는 방법은 무엇입니까?

  25. 25

    JavaScript에서 다양한 이벤트에 대한 단일 이벤트 핸들러를 만드는 방법

  26. 26

    배열 배열에서 JavaScript 사전을 만드는 간단한 방법

  27. 27

    Swift를 사용하여 iOS 앱에 대한 간단한 탐색보기를 만드는 방법

  28. 28

    배열에 무한 루프를 만드는 방법

  29. 29

    Scala에서 간단한 일시 중지 / 시간 초과를 만드는 방법

뜨겁다태그

보관