我想在javascript中创建递增和递减操作

时间:2017-05-19 11:06:04

标签: javascript jquery html ajax

我想创建一个像Increment/Decrements function with auto select qty range and highlights

这样的函数

我是javascript的新手,我尝试从各种来源收集代码,最后我构建到这个阶段。我的代码是

function incrementValue() {   // qty increment max 999
    var value = parseInt(document.getElementById('qty').value, 10);
    value = isNaN(value) ? 0 : value;
    if(value<999){ value++; document.getElementById('qty').value = value; }
}
function decrementValue() {   // qty decrement
    var value = parseInt(document.getElementById('qty').value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>1){ value--; document.getElementById('qty').value = value;  }
}
//radio value to text box display
function myFunction(browser) { document.getElementById("qty").value = browser;}
table tr {border:3px solid #ccc;}
table tr th {color:#000;}
table td {padding:10px; vertical-align:middle; text-align:center;}
<div>
  <p>220</p>
  <div>
    <input type="button" onclick="decrementValue()" value="-" />
    <input name="qty" id="qty" maxlength="12" value="1"type="text">
    <input type="button" onclick="incrementValue()" value="+" />
  </div>
  <table>
	<tr style="background:#f0f;"><th width="50">Select</th><th width="50">Qty</th><th width="50">Discount</th><th width="50">Price</th></tr>
	<tr><td width="50"><a href="#"><input type="radio" name="qty_select" value="5" onclick="myFunction(this.value)"/></a></td><td width="50">5</td><td width="50">5%</td><td width="50">200</td></tr>
	<tr><td><input type="radio" name="qty_select" value="10" onclick="myFunction(this.value)"/></td><td>10</td><td>10%</td><td>150</td></tr>
	<tr><td><input type="radio" name="qty_select" value="15" onclick="myFunction(this.value)"/></td><td>15</td><td>15%</td><td>125</td></tr>
	<tr><td><input type="radio" name="qty_select" value="20" onclick="myFunction(this.value)"/></td><td>20</td><td>20%</td><td>100</td></tr>
  </table>
</div>

我想创建上面提到的所有功能图像。

1 个答案:

答案 0 :(得分:0)

创建一个函数,该函数由按钮上的onClick事件或来自输入的onChange事件调用。

在该函数中设置在特定间隔中的数字时运行的动作。

这真的是JS的基础知识