在按钮单击时附加到值属性

Posted

技术标签:

【中文标题】在按钮单击时附加到值属性【英文标题】:Append to value attribute on button click 【发布时间】:2021-05-31 14:34:27 【问题描述】:

每次单击按钮时,我都会尝试修改输入。有点像计算器。将从 0 开始。当我单击按钮“7”时,它的值将更改为 7,当我单击“4”时,它将更改为 74。基本上就像一个计算器。

我编写的这段代码确实修改了输入的 ,但是我似乎找不到如何追加更多值到那个值。这是我的代码。有人可以帮我吗?

<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->

 $('.my-buttons').click(function()
     $(".normal-input").attr("value", $(this).attr('value'));
 ); <!-- The actual function. -->

如您所见,该函数完全用新值替换了以前的值。我希望它像计算器一样附加值。

【问题讨论】:

【参考方案1】:

我建议你尝试这样做:

将值初始化为零 每当调用 click 时,将当前值乘以 10,然后添加按钮值。 您可以根据用例删除 step 属性。

【讨论】:

【参考方案2】:

在这个函数中:

$(".normal-input").attr("value", $(this).attr('value'));

第二个参数是要设置的值:

$(this).attr('value')

您需要将其作为先前值和新值的组合:

$(".normal-input").attr('value') + '' + $(this).attr('value')

空白字符串是为了确保最终结果是一个字符串,而不是2个数字相加。

如果你想把它转换成数字,你可以使用 parseInt():

const combinedNumber = $(".normal-input").attr('value') + '' + $(this).attr('value')
const intNumber = parseInt(combinedNumber)

最终代码可能类似于:

<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->



$('.my-buttons').click(function()

    const existingValue = $(".normal-input").attr('value')
    const newValue = $(this).attr('value'
    const combinedValue = parseInt(existingValue + '' + newValue)
    $(".normal-input").attr("value", combinedValue);

 ); <!-- The actual function. -->

【讨论】:

您好!我试过用这个,但它不太管用。我也将其修改为: $(".normal-input").attr('value', 'value' + $(this).attr('value'));你知道会发生什么吗? 我已编辑回复以提供完整的解决方案 - 如果效果更好,请告诉我【参考方案3】:

您只需concat 实际值和单击按钮的值即可获取所需值。

演示代码

$('.my-buttons').click(function() 
  var value = $(".normal-input").val()
  var clicked_button = $(this).attr('value')
  //use val and combined both value
  $(".normal-input").val(value + "" + clicked_button);

);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="normal-input" type="number">
<button value="7" class="my-buttons" type="button"> 7 </button>
<button value="10" class="my-buttons" type="button"> 10 </button>
<button value="6" class="my-buttons" type="button"> 6 </button>

【讨论】:

以上是关于在按钮单击时附加到值属性的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的类型错误:在输入单击时无法读取 null 的属性“样式”

无法单击网络警报中的“确定”按钮

当我单击“更多”按钮时如何将 div 高度属性更改为自动

单击提交按钮时无法读取未定义的属性“设置”

如何在ms-access vba中单击命令按钮单击以更改代码以更改控件属性

单击时更改计算属性