Question

我正在尝试在输入更改其值时执行Javascript函数。单击其他输入时，输入会更改其值（这些输入会增大或减小该值）。

这是我的HTML代码：

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" />  

<input id='accessory{{$i}}' onchange="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" />

JS功能：

function updateNoAccessories(i) {
    var no = document.getElementById("accessory"+i).value;
    document.getElementById("acc"+i).innerHTML = no + ' x';
}

我想从JS功能更新：

<span>You chose:<i><b id="acc0"></b> items,</i><i><b id="acc1"></b> 
things,</i><i><b id="acc2"></b>stuff</i></span>

Answer 1

您的按钮+和 - 没有与onchange的输入相关联，因此您的事件永远不会被触发（也许您没有粘贴代码的那部分），您可以使用oninput而不是onchange。

你可以通过以下方式解决这个问题：

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" onclick='updateValue(-1,$i)'/> 

<input id='accessory{{$i}}' oninput="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" onclick='updateValue(+1,$i)'/>

和js：

function updateValue(i,id) {
    var no = document.getElementById("accessory"+id).value;
    no = no + i;
    document.getElementById("acc"+id).innerHTML = no;
}

function updateNoAccessories(i) {
    var no = document.getElementById("accessory"+i).value;
    document.getElementById("acc"+i).innerHTML = no + ' x';
}

Answer 2

只需将onchange事件替换为oninput，这将更新输入值更改时元素的值。

所以你的代码看起来像这样：

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" />  

<input id='accessory{{$i}}' oninput="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" />

希望这应该有效！

如何在输入更改时执行javascript函数？

2 个答案: