자바 스크립트 배열. 더하기, 빼기 및 합계

debugcn 에 게시 Dev

JAY-ARE-GEE

선생님이 내 수업에 자바 스크립트 배열과 관련된 과제를 제공하는 데 약간의 문제가 있습니다. 그들이 본질적으로 우리에게 원하는 것은 사용자가 숫자를 입력하고, 저장하고, 배열하고, 그 숫자를 웹 페이지에 표시 할 수있는 일종의 카트 / 계산기 하이브리드를 만드는 것입니다. 그런 다음 합계를 위해 함께 추가하거나 재설정 할 수 있습니다. 다시 시작하다.

재설정 버튼을 만드는 방법을 다소 알고 있다고 생각하며 항목을 배열에 효율적으로 추가하는 방법을 알아 냈다고 생각하지만 HTML 페이지에 해당 항목을 표시하는 방법과 방법에 대해 다소 난처합니다. 합계를 만들고 표시하기 위해 함께 추가합니다. 어떤 도움을 주시면 감사하겠습니다. 저는 이것에 대해 좀 새롭고 지금까지 우리 소스 자료의 지침은 약간 모호하고 이해하기 어렵습니다.

지금까지 입력 필드에 대한 간단한 html과 입력 필드를 배열에 추가하는 "번호 추가"버튼이 있습니다 (나중에 숫자로만 제한 할 것입니다).

<form onsubmit="return userNumber()">
        <p>Number:</p>
        <input type="text" id="box" /> 
        <br>
        <input type="button" value="Add Number" />
        <input type="button" value="Calculate" />
        <input type="button" value="Reset" />
       </form>

아직 계산 또는 재설정 버튼에 대한 코드가 없지만 콘솔을 불러올 때 제대로 작동하는 것처럼 보이는 번호 추가 버튼의 경우 웹 페이지에도 표시하기 위해 코드가 필요합니다. 여기에 제가 가지고있는 것이 있습니다.

var numbers = [];

function userNumber() {
  boxvalue = document.getElementById('box').value;
  numbers.push(boxvalue);  
  console.log(numbers);
  return false;
}

선생님이 보여 주신 이미지를 첨부했습니다. 그들은 우리가 기능적으로 만 비슷하게 만들길 원하고 외모는 그다지 중요하지 않습니다.

다시 한 번, 도움을 줄 수있는 사람에게 감사드립니다. 여기서 어디로 가야할지 헷갈려요!

Artanik

먼저, 그들 모두에게 id. 그들 모두가 "이름"을 가지고있을 때 그들과 함께 일하는 것이 훨씬 쉽습니다. 그런 다음 이벤트 (이 예에서는 클릭)를 쉽게 처리 할 수 있습니다 .

전에 공지 사항, 때, "추가"버튼을 클릭 push하면 사용할 필요가 parseInt(string, base)있기 때문에 input.value문자열이며, +운영자가 아닌 문자열을 추가하기위한 연결입니다. 마찬가지로 sum += numbers[i];아래.

그리고 numbers예를 들어 빈 배열이 있는 "계산"버튼을 클릭하면 코너 케이스에 대한 몇 가지 보호 기능이 있습니다 .

var numbers = [];
var boxInput = document.getElementById("box");
var addBtn = document.getElementById("add");
var calculateBtn = document.getElementById("calculate");
var resetBtn = document.getElementById("reset");
var allNumbers = document.getElementById("all-numbers");
var calculatedNumbers = document.getElementById("calculated-numbers");

addBtn.addEventListener("click", function() {
  if (boxInput.value.length > 0) {
    numbers.push(parseInt(boxInput.value, 10));
    boxInput.value = "";
  }

  allNumbers.innerHTML = numbers.join(" ");
});

calculateBtn.addEventListener("click", function() {
  if (numbers.length === 0) {
    return;
  }

  for (var i = 0, sum = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }

  calculatedNumbers.innerHTML = numbers.join(" + ") + " = " + sum;
});

resetBtn.addEventListener("click", function() {
  numbers = [];
  boxInput.value = "";
  allNumbers.innerHTML = "";
  calculatedNumbers.innerHTML = "";
});

<p>
  <label for="box">Number:</label>
  <input id="box" type="number" />
</p>

<p>
  <input type="button" id="add" value="Add Number" />
  <input type="button" id="calculate" value="Calculate" />
  <input type="button" id="reset" value="Reset" />
</p>

<h3>Numbers added:</h3>
<p id="all-numbers"></p>

<h3>Sums of numbers added:</h3>
<p id="calculated-numbers"></p>

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

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

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

자바 스크립트 배열. 더하기, 빼기 및 합계

자바 스크립트 배열. 더하기, 빼기 및 합계

문자열 배열 자바 스크립트의 합계 얻기

자바 스크립트 또는 jquery에서 여러 배열의 합계 얻기

액션 스크립트 숫자 더하기 및 빼기 이상한 행동

자바 스크립트로 문자열 찾기 및 바꾸기

자바 스크립트 배열보기

자바 스크립트 속기-배열

더하기 및 빼기 합계 속성

자바 스크립트에서 줄이기를 사용하여 배열의 변수에 대한 합계

자바 스크립트로 동적으로 배열 생성 및 채우기

자바 스크립트 및 HTML : 배열 행의 첫 번째 값 가져 오기

날짜 빼기 자바 스크립트

자바 스크립트 시간 빼기

자바 스크립트 및 jquery를 사용하여 중복 XML 요소를 문자열 배열로 읽기

자바 스크립트에서 고유 한 줄기의 배열을 계산합니까?

자바 스크립트에서 속기 및 회귀 결합

자바 스크립트 표 및 기능

자바 스크립트 배열 확인 및 결합

증분 키에 기반한 객체의 자바 스크립트 병합 배열

[자바 스크립트] 모든 배열 조합 가져 오기 (Cartesian Product)

자바 스크립트에서 배열 배열 만들기

PHP 배열로 배열 자바 스크립트 만들기

자바 스크립트에서 객체 배열을 결합하여 새 배열 만들기

HTML 레이블 또는 텍스트 필드에 자바 스크립트를 사용하여 값 더하기 및 빼기

배치 또는 펄 스크립트를 사용하여 문자열 검색 및 바꾸기

자바 스크립트 알고리즘 질문 : 배열에서 가장 큰 합계를 가진 연속 하위 배열 찾기

Bash 스크립트 : 문자열에서 대문자 찾기 및 바꾸기

자바 스크립트 배열에서 키 이름 바꾸기

JSON 배열 및 자바 스크립트

자바 스크립트 OOP 및 배열