重新分配输入字段，带有 JQuery 和 JavaScript 的简单计算器
[英]Reassigning input field, simple calculator with JQuery and JavaScript
问题描述
我正在尝试构建一个简单的计算器，但我想知道如何重新分配输入字段。 现在我收到以下错误消息：
"message": "Uncaught TypeError: res.split is not a function",
基本上我想在按下相等按钮时拆分字符串，并在输入字段中显示结果。 想象一下，输入了“12-3”之类的东西。
$('.equal').on('click', () => {
let res = ($('.inp').val(value))
let spl = res.split('-')
$('.inp').val(spl);
但是，由于我是 jquery 和 javascript 的新手，我真的不明白为什么会收到上面的错误消息。
非常感谢您阅读甚至帮助初学者，目前只有按钮“1”、“2”、“3”。 '-' 和 '=' 工作。
$(document).ready(() => { let numb1 = '1'; let value=""; $('.1').on('click', () => { $('.inp').val(value += numb1) }) let numb2 = '2'; $('.2').on('click', () => { $('.inp').val(value += numb2) }) let numb3 = '3'; $('.3').on('click', () => { $('.inp').val(value += numb3) }) let minus = '-'; $('.min').on('click', () => { $('.inp').val(value += minus) }) $('.equal').on('click', () => { let res = ($('.inp').val(value)) let spl = res.split('-') $('.inp').val(spl); }) });
.grid { display: grid; border: 2px black solid; border-radius: 5px; width: 40%; height: 60%; /*grid-template-columns: 50% 50%;*/ grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr; /*rows come first and then columns*/ margin: 10px; }.box { width: 60%; background-color: lightgray; margin: 10px; text-align: center; border-radius: 5px; }.box-gr { width: 60%; background-color: darkgray; margin: 10px; text-align: center; border-radius: 5px; }.inp { width: 40%; margin: 10px; border-radius: 5px; text-align: center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel='stylesheet' type='text/css' href='/Users/f/Downloads/Calc-project/style-calc:css'> <title>Chat-Messenger Window</title> <script src="https.//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> </head> <body> <input class="inp" type="text"/> <div class = "grid"> <button class="box-gr">(</button> <button class="box-gr">)</button> <button class="box-gr">%</button> <button class="box-gr">CE</button> <button class="box 7">7</button> <button class="box 8">8</button> <button class="box 9">9</button> <button class="box-gr">/</button> <button class="box 4">4</button> <button class="box 5">5</button> <button class="box 6">6</button> <button class="box-gr">x</button> <button class="box 1">1</button> <button class="box 2">2</button> <button class="box 3">3</button> <button class="box-gr min">-</button> <button class="box 0">0</button> <button class="box">.</button> <button class="box equal">=</button> <button class="box-gr">+</button> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-07-31 15:17:39
您的代码有几个问题。
let res = ($('.inp').val(value))
当您使用带有参数的val方法时，您将该值分配给目标元素。 要获取输入的值，请使用不带任何 arguments 的val 。
let spl = res.split('-')
最后，split 方法返回一个数组，而不是字符串。 例如，当您按照示例拆分字符串 "12-3" 时，您会得到["12", "3"] 。
编辑：鉴于您不考虑小数，并且它硬编码用于减法，这应该这样做：
$('.equal').on('click', () => {
// Get string from input
const inputValue = $('.inp').val();
// Split the string into two numbers
const numbers = inputValue.split('-');
// Subtract both numbers
const result = Number.parseInt(numbers[0]) - Number.parseInt(numbers[1]);
// Replace the input content by the result
$('.inp').val(result);
})
这假设.inp实际上具有该值（即：您提到的"12-3" ）
使用JQuery的简单JavaScript计算器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.