独立工作的HTML、Javascript多个按钮_Javascript_Html_Css

独立工作的HTML、Javascript多个按钮

javascript html css

独立工作的HTML、Javascript多个按钮,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个web服务器，它有多个按钮来控制数量的正负。如果我有3组加号按钮、减号按钮和文本，当我按下某一组时，它们不应该相互干扰。我如何做到这一点我写的代码是： var计数=0； var数量=document.getElementById数量；函数加号{ 计数++；数量.价值=计数； } 负函数{ 如果计数>0{ 计数-；数量.价值=计数； } } .卡片{ 盒影：0 4px 8px 0 rgba0,0,0,0.2；填充：16px；文本对齐：居中；背景色：F1F1；最大

我正在尝试创建一个web服务器，它有多个按钮来控制数量的正负。如果我有3组加号按钮、减号按钮和文本，当我按下某一组时，它们不应该相互干扰。我如何做到这一点

我写的代码是：

var计数=0； var数量=document.getElementById数量；函数加号{ 计数++；数量.价值=计数； } 负函数{ 如果计数>0{ 计数-；数量.价值=计数； } } .卡片{ 盒影：0 4px 8px 0 rgba0,0,0,0.2；填充：16px；文本对齐：居中；背景色：F1F1；最大宽度：200px； } .罗：之后{ 内容：；显示：表格；明确：两者皆有； } .行{边距：0-5px；} .栏目{ 浮动：左；宽度：15%；填充：0 10px； } @媒体屏幕和最大宽度：600px{ .栏目{ 宽度：100%；显示：块；边缘底部：20px； } } 我的页面项目1

项目2

项目3

您就快到了，但是您已经为每个输入提供了相同的ID，并且ID应该是唯一的。因此，对于每个输入，将id更改为唯一的

然后，您可以更改javascript函数，将“getElementById”包含在函数中，并将其作为变量传递，您还需要将count var更改为输入字段的值，如下所示：

function plus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;
    val++;
    quantity.value = val;
}

function minus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;

    if (val > 0) {
        val--;
        quantity.value = val;
    }
}

输入具有唯一id的示例，并将id名称作为参数传递给函数：

<input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/>
<input type='text' id='quantityA' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/>

我的页面项目1

项目2

项目3

您就快到了，但是您已经为每个输入提供了相同的ID，并且ID应该是唯一的。因此，对于每个输入，将id更改为唯一的

然后，您可以更改javascript函数，将“getElementById”包含在函数中，并将其作为变量传递，您还需要将count var更改为输入字段的值，如下所示：

function plus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;
    val++;
    quantity.value = val;
}

function minus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;

    if (val > 0) {
        val--;
        quantity.value = val;
    }
}

输入具有唯一id的示例，并将id名称作为参数传递给函数：

<input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/>
<input type='text' id='quantityA' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/>

我的页面项目1

项目2

项目3

获取当前单击的加号/减号按钮的相对输入，然后执行该操作，添加了代码段：

功能脉冲{ 变量数量=e.parentElement.querySelectorquantity；变量计数=parseIntquantity.value | | 0 计数++；数量.价值=计数； } 函数减数{ 变量数量=e.parentElement.querySelectorquantity；变量计数=parseIntquantity.value | | 0 如果计数>0{ 计数-；数量.价值=计数； } } .卡片{ 盒影：0 4px 8px 0 rgba0,0,0,0.2；填充：16px；文本对齐：居中；背景色：F1F1；最大宽度：200px； } .罗：之后{ 内容：；显示：表格；明确：两者皆有； } .行{边距：0-5px；} .栏目{ 浮动：左；宽度：15%；填充：0 10px； } @媒体屏幕和最大宽度：600px{ .栏目{ 宽度：100%；显示：块；边缘底部：20px； } } 我的页面项目1

项目2

项目3

获取当前单击的加号/减号按钮的相对输入，然后执行该操作，添加了代码段：

功能脉冲{ 变量数量=e.parentElement.querySelectorquantity；变量计数=parseIntquantity.value | | 0 计数++；数量.价值=计数； } 函数减数{ 变量数量=e.parentElement.querySelectorquantity；变量计数=parseIntquantity.value | | 0 如果计数>0{ 计数-；数量.价值=计数； } } .卡片{ 盒影：0 4px 8px 0 rgba0,0,0,0.2；填充：16px；文本对齐：居中；背景色：F1F1；最大宽度：200px； } .罗：之后{ 内容：；显示：表格；明确：两者皆有； } .行{边距：0-5px；} .栏目{ 浮动：左；宽度：15%；填充：0 10px； } @媒体屏幕 n和最大宽度：600px{ .栏目{ 宽度：100%；显示：块；边缘底部：20px； } } 我的页面项目1

项目2

项目3

我的解决方案版本。输入元素应该有类数量，加上按钮qtyplus类，减去按钮qtyminus类，您不必生成唯一id的

函数复数{ 数量值++； } 函数减量{ 如果数量值>0{ 数量价值-； } } 函数量{ var qtyInstances=document.getElementsByClassNamequantity； Array.prototype.forEach.callqtyInstances，functionel{ const wrap=el.parentElement； const plusBtn=wrap.querySelector'.qtyplus'； const minusBtn=wrap.querySelector'.qtyminus'； plusBtn.addEventListener'click'，plus.bindnull，el； minusBtn.addEventListener'click'，减号.bindnull，el； }; } 量 .卡片{ 盒影：0 4px 8px 0 rgba0,0,0,0.2；填充：16px；文本对齐：居中；背景色：F1F1；最大宽度：200px； } .罗：之后{ 内容：；显示：表格；明确：两者皆有； } .行{边距：0-5px；} .栏目{ 浮动：左；宽度：15%；填充：0 10px； } @媒体屏幕和最大宽度：600px{ .栏目{ 宽度：100%；显示：块；边缘底部：20px； } } 我的页面项目1

项目2

项目3

我的解决方案版本。输入元素应该有类数量，加上按钮qtyplus类，减去按钮qtyminus类，您不必生成唯一id的

项目2

项目3

您应该真正了解数组。理想情况下，您有一个项目数组，加减函数获取它们必须修改的元素的数组索引。您有三个ID为“qtyminus”、“quantity”和“qtyplus”的元素。ID在HTML文档中必须是唯一的。您应该真正了解数组。理想情况下，您有一个项目数组，加减函数获取它们必须修改的元素的数组索引。您有三个ID为“qtyminus”、“quantity”和“qtyplus”的元素。ID在HTML文档中必须是唯一的。非常感谢！我很烦恼，为此坚持了几个小时！不用担心，很高兴能帮上忙：谢谢你给VoteTank这么多！我很烦恼，为此坚持了几个小时！不用担心，很高兴能帮上忙：谢谢你的投票