자바 스크립트 텍스트 입력 계산기

저는 자바 스크립트에 다소 익숙하며 3 개의 텍스트 입력, 1 번째 숫자 텍스트 상자, 연산 텍스트 상자 및 2 번째 숫자 텍스트 상자가있는 기본 계산기를 만들려고합니다. 버튼을 클릭하거나 이벤트를 트리거하는 다른 방법을 사용할 때 텍스트를 인쇄하십시오.자바 스크립트 텍스트 입력 계산기

<html> 
<script> 
function calc() 
{ 
    var D = ""; 
    var A = document.getElementById("num1").value; 
    var B = document.getElementById("op").value; 
    var C = document.getElementById("num2").value; 
    if(B == "+") 
    { 
     D = A+C; 
    } 
    elseif(B == "-") 
    { 
     D = A-C; 
    } 
    elseif(B == "*") 
    { 
     D = A*C; 
    } 
    elseif(B == "/") 
    { 
     D = A/C; 
    } 
    document.getElementById("result").innerHTML = D; 
} 
</script> 

<body> 
    <input type="text" id="num1" name="num1" /> 
    <input type="text" id="op" name="op" /> 
    <input type="text" id="num2" name="num2" /> 
    <br /> 
    <input type="button" value="Solve" onclick="calc()" /> 

    <p id="result" name="r1"> 
     <br /> 
    </p> 

</body> 
</html>

출처

2013-04-14 Brian Johnson

스크립트를 페이지의 맨 아래에 놓고 parseFloat (A, 10)을 사용하고 C – Givi

그것은 else if하지 elseif입니다 : 이 내 코드입니다. 또한 A + C에 parseInt를 사용해야합니다. 그렇지 않으면 문자열을 ... 음, 문자열로 처리합니다. 브라우저에서 elseif 오류가 발생 했어야합니다. 방화범 같은 것을 쓰고 있습니까? 그렇지 않다면 시작하십시오. 공구가 당신을 위해 열심히 일하게하십시오.

출처

2013-04-14 00:50:14 aquinas

(⌒ ▽ ⌒)과 동일하게 사용하면 감사합니다. –

나는 다음 (코드 자체에 주석 설명을) 건의 할 것입니다 :

function calc() { 
     /* finds out whether the browser uses textContent (Webkit, Opera, Mozilla...) 
      or innerText (Microsoft) to set the text of an element/node */ 
    var textType = Node.textContent ? 'textContent' : 'innerText', 
     /* uses parseFloat to create numbers (where possible) from the entered value 
      if parseFloat fails to find a number (it's empty or nonsensical) 
      then a 0 is used instead (to prevent NaN being the output). */ 
     num1 = parseFloat(document.getElementById('num1').value) || 0, 
     num2 = parseFloat(document.getElementById('num2').value) || 0, 
     // retrieves the result element 
     result = document.getElementById('result'); 

    // switch is used to avoid lots of 'if'/'else if' statements, 
    // .replace() is used to remove leading, and trailing, whitespace 
    // could use .trim() instead, but that'd need a shim for (older?) IE 
    switch (document.getElementById('op').value.replace(/\s/g,'')){ 
     // if the entered value is: 
     // a '+' then we set the result element's text to the sum 
     case '+': 
      result[textType] = num1 + num2; 
      break; 
     // and so on... 
     case '-': 
      result[textType] = num1 - num2; 
      break; 
     case '*': 
      result[textType] = num1 * num2; 
      break; 
     case '/': 
      result[textType] = num1/num2; 
      break; 
     // because people are going to try, give a default message if a non-math 
     // operand is used 
     default: 
      result[textType] = 'Seriously? You wanted to try math with that operand? Now stop being silly.' 
      break; 
    } 
}

JS Fiddle demo합니다.

참고 :

출처

2013-04-14 01:12:11

나는 조금 다르게했을 것입니다,하지만 코드를 나는 다음과 같은 한 작업을 진행하게 귀하의 질문에 대답하고 바로하기 :

여기

이 수정 된 코드입니다 : 내가

<html> 
<script> 
function calc(form) { 

var D = "0"; 
var A = document.getElementById("num1").value; 
var B = document.getElementById("op").value; 
var C = document.getElementById("num2").value; 

if (B === "+") 
{ 
D = parseInt(A)+parseInt(C); 
} 
else if(B === "-") 
{ 
D = parseInt(A)-parseInt(C); 
} 
else if(B === "*") 
{ 
D = parseInt(A)*parseInt(C); 
} 
else if (B === "/") 
{ 
D = parseInt(A)/parseInt(C); 
} 
document.getElementById("result").innerHTML = D; 
return false; 
} 
</script> 
<body> 

<input type="text" id="num1" name="num1" /> 
<input type="text" id="op" name="op" /> 
<input type="text" id="num2" name="num2" /> 
<br /> 
<input type="button" value="Solve" onClick="calc(this)"> 

<p id="result" name="r1"> 
<br /> 
</p> 

</body> 
</html>

사용 parseint() if 문에있는 표현식이 텍스트 같은 값을 처리했기 때문입니다.

다음은 === 세 개의 등호가 필요합니다. A는 실제로 + 또는 두 번째 입력 값이 무엇인지를 나타냅니다.

셋째는 onclick이었습니다. 나는 함수 계산을 나타내는 줄에서 볼 수 있듯이 (this)와 feed back 양식을 작성했습니다.

좋은 측정을 위해 나는 false를 반환했습니다. 양식 제출을 방지하기 위해 (그러나 그것 없이는 작동 할 것입니다).

다른 포스터와 마찬가지로 elseif도 있습니다.

도움이되기를 바랍니다. 다시 말하지만, 나는 다르게 할 것이지만 몇 가지 설명과 함께 작동하게 만들었습니다.

출처

2013-04-14 01:49:47

그냥 메모 ... parseint()는 정수를 처리하지만 parsefloat()는 소수점을 처리합니다. 위의 포스터로 좋은 생각. –

단일 입력 상자와 함께 할 수있는 방법이있다 :

function findOps(s) { 
    for (var i = 0; i < s.length; i++) { 
    if (s[i] == "+") 
     return "+"; 
    if (s[i] == "-") 
     return "-"; 
    if (s[i] == "*") 
     return "*"; 
    if (s[i] == "/") 
     return "/"; 
    } 
} 
var input = ''; 
function calc() { 
    var dom = $("#input"); 
    input = dom.val(); 
    try { 
    switch (findOps(input)) { 
     case "+": 
     var a = input.split("+"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x + y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "-": 
     var a = input.split("-"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x - y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "*": 
     var a = input.split("*"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x * y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "/": 
     var a = input.split("/"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x/y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
    } 

    } catch (err) { 
    alert("catched¡"); 
    } 

}

출처

2016-05-17 03:44:18 Cris

내가 평가() 를 사용하는 것이 좋습니다는 만약 사용자 입력 "5 + 6"또는 "(9 * 3)/5 "변수로 설정하면 eval()이 구문을 분석하여 문제를 해결합니다!

출처

2017-05-10 20:00:45

자바 스크립트 텍스트 입력 계산기

답변

관련 문제