H Y
50
2021-04-19 13:46:14
5
139

자바 스크립트 input 입력값을 받아 사칙 연산 코딩 방법


안녕하세요 html css javascript를 공부하고 프로젝트를 만들어보고 있는데

막히는 부분이 있어 문의 드립니다.


주식 단가 계산으로 보유 단가 / 보유 수량을 입력하고 입력 버튼을 누르면

보유 금액에 단가 * 수량 =보유 금액 값이 나오게 하려고 하는데요.

일단 서칭을 해서 아래와 같이 html과 자바스크립트를 작성했는데 실행이 되지 않네요.

초보 도움 요청 드립니다.

[html]

<form>
  <div class="have_stock stall">보유 단가<br>
    <input type="text" id="have_price" placeholder="보유 단가">
    <input type="text" id="have_much" placeholder="보유 수량">
    <input type="text" id="have_money" placeholder="보유 금액" disabled>
    <button onclick="haveresult">입력</button>
    </input>  
  </div>


<script type="text/jacascript">
  function haveresult(){
    let have1 = document.getElementsById("have_price").value;
    let have2 = document.getElementsById("have_much").value;
    document.getElementsById("have_money") = parseInt(have1) * parseInt(have2);
</script>



0
  • 답변 5

  • howoni123
    888
    2021-04-19 13:59:45

    잘못된부분.

    1. form 부분이 데이터 넘겨주는거 아니라면 button type="button" 

    2. onclick 시 함수호출하려면 haveresult() 로 호출.

    3. 위의 경우 </input> 이 필요없음.

    4. </form> 없음.  ( 아마 짤린거겟졍..? )

    5. script type="text/javascript" 임.

    6. ID have_money 의 값 수정하려면 value 쓰면 됨. (위에처럼..)

    7. function haveresult 의 괄호가 안닫혀있음.

    <form>
      <div class="have_stock stall">보유 단가<br>
        <input type="text" id="have_price" placeholder="보유 단가">
        <input type="text" id="have_much" placeholder="보유 수량">
        <input type="text" id="have_money" placeholder="보유 금액" disabled>
        <button type="button" onclick="haveresult()">입력</button>
      </div>
    </form>
    
    <script type="text/javascript">
      function haveresult(){
        let have1 = document.getElementById("have_price").value;
        let have2 = document.getElementById("have_much").value;
        document.getElementById("have_money").value = parseInt(have1) * parseInt(have2);
    }
    </script>


  • H Y
    50
    2021-04-19 14:53:58

    안녕하세요 친절한 답변 감사드립니다.

    기호랑 오타 타이핑도 있었네요... 근데 말씀주신 것처럼 아래와 같이 수정했는데

    또 오류가 뜨는데 조언 부탁드립니다;;

    제가 이해한 문법으로는 오류가 없는것 같은데... 구현하려는 페이지 이미지랑 

    오류 내용 추가 첨부드립니다.

    <form>
      <div class="have_stock stall">보유 단가<br>
        <input type="text" id="have_price" placeholder="보유 단가">
        <input type="text" id="have_much" placeholder="보유 수량">
        <input type="text" id="have_money" placeholder="보유 금액" disabled>
        <button type="button" onclick="haveresult()">입력</button>
        </input>  


    <script type="text/javascript">
      function haveresult(){
        let have1 = document.getElementsById("have_price").value;
        let have2 = document.getElementsById("have_much").value;
        document.getElementsById("have_money").value = parseInt(have1) * parseInt(have2);
    }
    </script>




  • H Y
    50
    2021-04-19 14:57:15

    Uncaught SyntaxError: Unexpected token '<'

    investmate_price.html:36 Uncaught ReferenceError: haveresult is not defined

        at HTMLButtonElement.onclick (investmate_price.html:36)


    오류코드 입니다.

    아래는 구현하려는 페이지에요

  • howoni123
    888
    2021-04-19 15:01:15 작성 2021-04-19 15:03:04 수정됨

    답글에서 하나 누락했네요

    getElementsById 가 아니라 getElementByID 입니다.

    그리고 위의 에러는 풀 HTML 올려주세요

  • H Y
    50
    2021-04-19 16:24:25
    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <title>투자 메이트</title>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="im_price style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="havecal.js"></script>

    </head>
    <div class="wrap_intro">
      <div class="hedder">
        <span>Sign In</span>
        <div class="log">
          <input type="text" placeholder="ID">
          <input type="text" placeholder="PW">
          <button>Log In</button>
        </div>
      <div class="title">
        <h1>투자 메이트</h1>
        <p>성공 투자를 위한 파트너</p>
      </div>
      </div>
    </div>
    <ul class="navi">
      <li><a href="#">평단가 계산기 </a></li>
      <li><a href="#">매매일지 입력 </a></li>
      <li><a href="#">나의 매매일지</a></li>
    </ul>
    <form>
      <div class="have_stock stall">보유 단가<br>
        <input type="text" id="have_price" placeholder="보유 단가">
        <input type="text" id="have_much" placeholder="보유 수량">
        <input type="text" id="have_money" placeholder="보유 금액" disabled>
        <button type="button" onclick="haveresult()">입력</button>
        </input>  
      </div>
      <div class="add_stock stall">추가 매수<br>
        <input type="text" id="add_price" placeholder="추매 단가">
        <input type="text" id="add_much" placeholder="추매 수량">
        <input type="text" id="add_money" placeholder="추매 금액" disabled>
        <button>입력</button>
        </input>  
      </div>
      <div class="final_stock stall">최종 보유<br>
        <input type="text" id="final_price" placeholder="최종 단가">
        <input type="text" id="final_much" placeholder="최종 수량">
        <input type="text" id="final_money" placeholder="최종 금액" disabled>
        <button>입력</button>
        </input>  
      </div>
    </form>

    </div>

    </body>
    </html>
  • 로그인을 하시면 답변을 등록할 수 있습니다.