2017-01-22 31 views
0

有人可以帮我弄清楚,因为我是新来的JavaScript。我尝试了一个简单的计算器使用jQuery。但是当我尝试在文本框中添加一个值的同时点击它,它不起作用。这里是代码片段。提前感谢。使用在文本框中添加附加(值)时遇到麻烦,同时点击一个按钮

请找到https://jsfiddle.net/jananivaish/hwLa72yu/

<body> 
    <div class="calc"> 
     <h1>Calculator </h1> 
     <input id="display" name="display" /> 
     <input id="Result" name="result" /> 
     <table> 
      <tr class="row"> 
       <td> <button value="7" name="7" class="number" id="seven">7</button> </td> 
       <td> <button value="8" name="8" id="eight" class="number">8</button> </td> 
       <td> <button value="9" name="9" id="nine" class="number">9</button> </td> 
       <td> <button value="+" name="sum" id="sum" class="number">+</button> </td> 
      </tr> 
      <tr class="row"> 
       <td> <button value="4" name="4" id="four" class="number">4</button> </td> 
       <td> <button value="5" name="5" id="five" class="number">5</button> </td> 
       <td> <button value="6" name="6" id="six" class="number">6</button> </td> 
       <td> <button value="-" name="sub" id="sub" class="number">-</button> </td> 
      </tr> 
      <tr class="row"> 
       <td> <button value="1" name="1" id="one" class="number">1</button> </td> 
       <td> <button value="2" id="two" class="number">2</button> </td> 
       <td> <button value="3" id="three" class="number">3</button> </td> 
       <td> <button value="*" id="mul" class="number"> * </button> </td> 
      </tr> 
      <tr class="row"> 
       <td> <button value="0" class="number" name="0" id="zero">0</button> </td> 
       <td> <button value="=" id="equal">=</button> </td> 
       <td> <button value="dot" class="number" id="dot">.</button> </td> 
       <td> <button value="/" id="divi" class="number">/</button> </td> 
      </tr> 
     </table> 
     <button id="clear" class="clear">clear</button> 
    </div> 
</body> 



$(document).ready(function() { 
    $(".number").click(function() { 
     var value = $(this).val(); 
     $("#display").append(value); 
    }); 
    $("#equal").click(function() { 
     var calc = $("#display").text(); 
     var answer = eval(calc); 
     $("#Result").text(answer); 
    }); 
    $(".clear").click(function() { 
     $("#display").text(""); 
     $("#Result").text(""); 
    }); 
}); 

回答

0

对于输入标签,根据MDN,默认类型为text:

类型控件中显示的。如果未指定此属性,则默认类型为文本。

为了获得输入类型文本的值,您需要使用jQuery.val()

此外,功能eval根据MDN

的eval()函数的计算结果表示为一个字符串的JavaScript代码。

只是举例来说,如果你在显示领域写入字符串警报(“OK”)结果将是报警功能的执行。这可能会导致您遇到明显错误(用户可能会出于恶意目的)。最好的方法是避免所有的eval函数或测试字符串的内容(只允许数字和数学运算符)。你可以这样做,只是为了例如,使用一个简单的正则表达式模式:再次

if (!/^[0-9+\-*/ ]*$/.test(calc)) { 
    alert('input error'); 
} 

但是,只加入本次测试将防止恶意的结果,但不会向你保证正确的结果就像:

8 ++ 2 

为了避免这最后一点,您可以使用try...catch

更新fiddle和片段:

$(document).ready(function(){ 
 
    $(".number").on('click', function(e) { 
 
    var value = $(this).val(); 
 
    $("#display").val(function(idx, val) { 
 
     return val + value; 
 
    }); 
 
    }); 
 
    $("#equal").on('click', function(e) { 
 
    var calc = $("#display").val(); 
 
    if (!/^[0-9+\-*/ ]*$/.test(calc)) { 
 
     $("#Result").val('input error'); 
 
     return; 
 
    } 
 
    $("#Result").val(function(idx, val) { 
 
     try { 
 
     return eval(calc); 
 
     } catch(err) { 
 
     return "error" 
 
     } 
 
    }); 
 
    }); 
 
    $(".clear").click(function(e) { 
 
    $("#display, #Result").val(""); 
 
    }); 
 
});
h1{color:white; 
 
    text-align:center; 
 
} 
 
#Result, #display{margin-left:25px; 
 
    font-family: Droid Sans Mono; 
 
    background-color:#aaa; 
 
    display: table; 
 
    width:70%; 
 
    height:20px; 
 
    border-radius:5px; 
 
    color: #333; 
 
} 
 
.calc { 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:225px; 
 
    height:300px; 
 
    background-color: #444; 
 
    border-radius: 20px; 
 
    font-family:oxygen; 
 
} 
 
.row{text-align:center; 
 
    position:relative; 
 
} 
 
table{margin-left:50px; 
 
    margin-top:15px; 
 
} 
 
.clear{margin-left:80px; 
 
    margin-top:15px; 
 
    width:50px; 
 
    height:25px; 
 
    border-radius:5px; 
 
} 
 
button{width:25px; 
 
    height:25px; 
 
    border-radius:5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 

 
<div class="calc"> 
 
    <section> 
 
     <h1>Calculator </h1> 
 
     <input id="display" name ="display" /> 
 
     <input id="Result" name ="result" /> 
 
     <table > 
 
      <tr class="row"> 
 
       <td> <button value="7" name= "7" class="number" id ="seven" >7</button> </td> 
 
       <td> <button value="8" name= "8" id="eight" class="number">8</button> </td> 
 
       <td> <button value="9" name= "9" id="nine" class="number" >9</button> </td> 
 
       <td> <button value="+" name= "sum" id="sum" class="number" >+</button> </td> 
 
      </tr> 
 
      <tr class="row"> 
 
       <td> <button value="4" name= "4" id="four" class="number">4</button> </td> 
 
       <td> <button value="5" name= "5" id="five" class="number">5</button> </td> 
 
       <td> <button value="6" name= "6" id="six" class="number">6</button> </td> 
 
       <td> <button value="-" name= "sub" id="sub" class="number">-</button> </td> 
 
      </tr> 
 
      <tr class="row"> 
 
       <td> <button value="1" name= "1" id="one" class="number">1</button> </td> 
 
       <td> <button value="2" id="two" class="number">2</button> </td> 
 
       <td> <button value="3" id="three" class="number">3</button> </td> 
 
       <td> <button value="*" id="mul" class="number"> * </button> </td> 
 
      </tr> 
 
      <tr class="row"> 
 
       <td> <button value="0" class="number" name="0" id="zero">0</button> </td> 
 
       <td> <button value="=" id="equal" >=</button> </td> 
 
       <td> <button value="dot" class="number" id="dot">.</button> </td> 
 
       <td> <button value="/" id="divi" class="number">/</button> </td> 
 
      </tr> 
 
     </table> 
 
     <button id="clear" class="clear">clear</button> 
 
    </section> 
 
</div>

1

的代码你不能在这里使用append,因为这是用于

插入内容,由指定的参数,每个元素 到底匹配元素的集合。

因为您似乎想在输入内显示您的“数字”。使用输入的

您的代码可能是这样的,那么:

[...] 
var value = $(this).val() + $("#display").val(); 
$("#display").val(value); 
[...] 
相关问题