jQuery点击按钮事件无法将值分配给变量

Question

我正在编写一个计算器，尝试获取分配给按钮的“.”。当单击按钮时，我想将按钮的值放入变量中，然后在 div 的内容中显示它。

对于数字，我检索结果，但对于“.”没有发生任何事情。

这是我的 codepen 工作链接: [javascript 计算器][1]

$('button').click(function(){
    input = $(this).val();

    if (!isNaN(eval(input)) || input === "."){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);
    }
});

- lisarko8077

---

一个按钮通常没有值。 - sTx

缺少 CodePen 链接。 - ScanQR

@Pierre-LoupPagniez，您应该阅读：.attr("value")它可以有一个带有单词"value"的属性，但这并不意味着按钮值可以使用.val()调用，请阅读您发布的链接的答案。 - zerohero

我在哪里说过按钮值可以使用.val()调用？我只是说value是标签button的有效属性。 - Pierre-Loup Pagniez

https://jsfiddle.net/arunpjohny/p9g5tvsc/1/ - 看起来不错 - Arun P Johny

Answer 1

值仅与输入元素相关联，因此 .val() 不能提供按钮的值属性。但由于 button value 是一个 属性, 因此您需要使用jquery中的.attr() 方法。这应该可以解决问题。

<script type="text/javascript">
   $('button').click(function(){
    input = $(this).attr("value")

    if (input === "." || !isNaN(eval(input))){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);
    }
});
</script>

$('button').click(function(){
        var input = $(this).attr("value")
    
        if ( input === "." || !isNaN(eval(input))){
          console.log("input: "+input);
          
        }
  });

 
It is failing for you because when you test `!isNan(eval(input))` where `input = "."` your code breaks. change it to `if ( input === "." || !isNaN(eval(input))){` 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value = ".">Hello</button>

- Shubham Khatri

---

我用attr("value")进行了更改，但它仍然不起作用。我发现它没有进入if语句，因为我在if语句内部放置了console.log(input)，但它没有返回任何内容。 - lisarko8077

Answer 2

问题: 由于button元素不是input类型，因此您无法仅使用.val()在元素上获取其值。

解决方案: 使用.attr在按钮上获取value属性中的数据。

 input = $(this).attr('value');

- Rajshekar Reddy

Answer 3

注意：为了不破坏您学习js的旅程，我考虑只修复您要求的内容，而不是纠正可能出错的所有内容；）

考虑这个jsfiddle：https://jsfiddle.net/hakeero/cw82r1se/3/

这就是我最终编写的代码，并使程序在文本框中“显示”数字和浮点数。

    $('button').click(function(){
    input = $(this).text();

    if (input || input === "."){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);

    }
});

关于解决方案的注释：

1- 为了简单起见，我只添加了数字1和2的按钮。

2- 要正确读取按钮文本，您只需要使用jquery方法text()即可。

input = $(this).text();

3- 我已经跳过了在您原始代码中对每个输入调用eval，因为如果尝试评估浮点数.，它将无法工作，留给您思考另一种解决方案；）

希望这可以帮到您。

- Mohammed Swillam