자바 스크립트 함수에서 반환 값 표시

Question

두 개의 매개 변수를 사용하여 합계를 반환하는 함수가 있습니다.

이제 두 개의 숫자가있는 양식을 만들려고합니다. 버튼을 클릭하면 함수 sum을 호출하고이 두 숫자의 합계를 표시해야합니다. 반환 값을 표시하는 가장 좋은 방법은 무엇입니까? 지금까지

내 코드 :

<form> 
     <input type="number" id="firstnumber"/> 
     <input type="number" id="secondnumber"/> 
     <input type="button" onclick="summa(document.getElementById(firstnumber),document.getElementById(secondnumber))" id="Summa" value="Calculate sum"/> 
    </form> 
    <div> 
     <script type="text/javascript"> 
document.write(document.getElementById(Summa)) 
</script> 
    </div> 

기능 : 당신이 무슨 일을하는지에 대해 조금 남았습니다 몇 가지가 있습니다

<script type="text/javascript"> 
     function summa(number1, number2) 
     { 
      var sum = number1 + number2; 
      return sum; 
     } 
    </script> 

Answer 1

. 첫째로, 값을 입력에서 함수로 전달하지 않습니다. 요소을 전달 중입니다. 둘째, 문서에 값을 쓰려고 시도 할 때 요소의 값이 아닌 요소를 다시 참조합니다. 마지막으로 실제 수학을 수행하는 대신 새로운 문자열로 연결하는 요소 (또는 검색하는 경우 해당 문자열 값)를 함께 추가하려고합니다.

이

정말 청소하고 시도를 고정하는 내 방식이다 :

먼저, (우리가 나중에 다른 이벤트 핸들러를 연결할 수 있습니다) 모두 추한 및 돌출 온 클릭 이벤트 핸들러를 제거하자 :

<input type="text" id="sumnumber" /> 

그리고 지금의 모든 작업을 수행 할 수 t : 우리가 합계를 표시 할 수

<input type="button" id="Summa" value="Calculate sum"/> 

세 번째 입력을 추가 그는 닫는 </body> 태그 전에 마지막으로 한 곳에서 JavaScript 작업을합니다. 이렇게하면 HTML을 깨끗하게 유지하고 인라인 JavaScript로 깔끔하게 정리할 수 있으므로 변경해야 할 때 파고 들지 않아도됩니다.

... 
    <script type="text/javascript"> 

     // Your new summing function definition that takes input values 
     function summa(valueOne, valueTwo) { 
      // Convert the strings to numbers before doing the math 
      return Number(valueOne) + Number(valueTwo); 
     } 

     // Now let's hold onto some references to the elements in the page 
     var sumButton = document.getElementById('Summa'); 
     var firstNumber = document.getElementById('firstnumber'); 
     var secondNumber = document.getElementById('secondnumber'); 
     var sumNumber = document.getElementById('sumnumber'); 

     // Wire up the event 
     sumButton.onclick = function() { 
      // Re-use the variables outside of this scope to retrieve 
      var sum = summa(firstNumber.value, secondNumber.value); 
      // Update the sum element with the result of the function 
      sumNumber.value = sum.toString(); 
     }; 

    </script> 
</body> 

는 다음 작업 jsFiddle Demo입니다.

참고 : 0120-참고 :이 예제는 프로덕션 코드 일 뿐이며 교육용 예제가 아닌 경우, (1) 번호 유효성 검사, (2) 입력 잠금 (maxlength, 등) 및 출력 (<span> 또는 유사 업데이트), 기타 사소한 것들 중에서.