文章/答案/技术大牛

发布

社区首页 >问答首页 >独立工作的HTML、Javascript多个按钮

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

Stack Overflow用户

提问于 2019-10-24 21:37:07

回答 3查看 137关注 0票数 1

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

我写的代码是：

var count=0;
var quantity = document.getElementById("quantity");
function plus(){
    count++;
    quantity.value = count;
}
function minus(){
    if (count > 0) {
    	count--;
    	quantity.value = count;
    }
}

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

    <!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

javascript

html

css

回答 3

Stack Overflow用户

发布于 2019-10-24 21:46:31

您就快成功了，但是您已经为每个输入提供了相同的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')"/>

将其他输入字段ids命名为'quantityB‘等....

然后，这将仅将+/-应用于您使用id作为参数传递给js函数的输入字段。

我已经测试过了，它是有效的。您可以进一步压缩这段代码，但这将为您提供一个可以继续工作的示例。

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;
    }
}

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><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')"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus('quantityB')"/>
    			<input type='text' id='quantityB' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus('quantityB')"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus('quantityC')"/>
    			<input type='text' id='quantityC' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus('quantityC')"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

票数 3

Stack Overflow用户

发布于 2019-10-24 22:09:36

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

function plus(e){
    var quantity = e.parentElement.querySelector("#quantity");
    var count = parseInt(quantity.value || 0)
    count++;
    quantity.value = count;
}
function minus(e){
    var quantity = e.parentElement.querySelector("#quantity");
    var count = parseInt(quantity.value || 0)
    if (count > 0) {
    	count--;
    	quantity.value = count;
    }
}

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

票数 1

Stack Overflow用户

发布于 2019-10-24 22:48:19

我的解决方案版本。输入元素应该有类quantity，加上按钮qtyplus类，减去按钮qtyminus类，你不需要生成唯一的id…

function plus(qty){
    qty.value++;
}
function minus(qty){
    if (qty.value > 0) {
    	qty.value--;
    }
}

function quantity() {
  var qtyInstances = document.getElementsByClassName("quantity");
  Array.prototype.forEach.call(qtyInstances, function(el) {
    const wrap = el.parentElement;
    
    const plusBtn = wrap.querySelector('.qtyplus');
    const minusBtn = wrap.querySelector('.qtyminus');
    
    plusBtn.addEventListener('click', plus.bind(null, el));
    minusBtn.addEventListener('click', minus.bind(null, el));
  });
}

quantity();

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity1' value='0' style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity2' value='0' style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity3' value='0'  style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58542620

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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