创建商店按钮以添加/删除金额和显示金额（非常基本）答案

【问题标题】：Creating a store button to add/remove amount and display amount (Very Basic)创建商店按钮以添加/删除金额和显示金额（非常基本）
【发布时间】：2018-09-14 12:12:47
【问题描述】：

寻求帮助，在表单中创建添加和减去按钮以添加和删除库存行的数量。

类似于：

我对 html 很陌生，对 javascript 也很陌生。

function minus(){
	var bCount = parseInt(document.calculateCart.count.value);
	var count = bCount--;
	document.calculateCart.count.value = count;
  }
function minus(){
	var bCount = parseInt(document.calculateCart.count.value);
	var count = bCount++;
	document.calculateCart.bCount.value = count;
}

<div class="productForm">
  <form name="calculateCart" action="#">
	  <div class="+-Buttons">
		  Quantity <br>
		<input type="button" value="-" onClick="minus()">
		<input type="int" name="count" value=0>
		<input type="button" value="+" onClick="add()">
	  </div>
	</form>
</div>

【问题讨论】：

首先，将第二个函数从Minus重命名为Add
两个错别字，minus 函数两次，bCount -> count，bCount 不包含 count 元素，它包含一些数字。

标签： javascript html css forms button

【解决方案1】：

如果您想使用按钮和文本输入来更改您的号码，您可以将您的代码更改为：

<div class="productForm">
    <form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
        <div class="+-Buttons">
            Quantity <br>
            <input type="button" value="-" onClick="minus()">
            <input type="number" name="count" value=0>
            <input type="button" value="+" onClick="add()">
        </div>
    </form>
</div>
<script>
    function minus(){
        document.calculateCart.count.value = --document.calculateCart.count.value;
    }

    function add(){
        document.calculateCart.count.value = ++document.calculateCart.count.value;
    }
</script>

在 HTML 中不存在输入类型 - int，您需要使用数字或文本。

如果您只想使用按钮更改值，可以这样：

<div class="productForm">
    <form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
        <div class="+-Buttons">
            Quantity <br>
            <input type="button" value="-" onClick="minus()">
            <span id="your-number">0</span>
            <input type="button" value="+" onClick="add()">
        </div>
    </form>
</div>
<script>
    var a = 0;

    function minus(){
        a -= 1;
        document.getElementById('your-number').innerHTML = a;
    }

    function add(){
        a += 1;
        document.getElementById('your-number').innerHTML = a;
    }
</script>

【讨论】：

非常感谢！这完全按预期工作。如果我很贪心，有没有办法在设置最小值的同时执行第二个代码 sn-p？或者这只能使用输入标签而不是跨度标签？
如果要设置最小值，可以在javascript中使用if语句检查。像这样：if(a < 0) {} 为按钮设置一些样式以进行减法操作，例如禁用按钮
谢谢。我非常感谢这个

【解决方案2】：

您的两个函数都命名为“减号”。其中之一（第二个）应该是“添加”。

【讨论】：

谢谢，只是复制粘贴以节省时间，以后一定要仔细检查

【解决方案3】：

您的代码中有一些错字：用于添加值的函数称为 minus()。所以你有两个同名的函数
我相信您以错误的方式获取 count 的值。您应该为输入分配一个 id 并使用 getElementById

工作代码：

function minus(){
        var bCount = document.getElementById('count').value;
        bCount--;
        document.getElementById('count').value = bCount;
   document.getElementById('count');
      }
    function add(){
        var bCount = document.getElementById('count').value;
        bCount++;
        document.getElementById('count').value = bCount;
   document.getElementById('count');
    }

<div class="productForm">
  <form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
      <div class="+-Buttons">
          Quantity <br>
        <input type="button" value="-" onClick="minus()">
        <input type="int" name="count" id="count" value=0>
        <input type="button" value="+" onClick="add()">
      </div>
    </form>
</div>

【讨论】：

您可以使用document[formName] 访问文档上的表单，这不是问题（本身），但是还有另一个错字bCount -> count

【解决方案4】：

您需要使用document.getElementById 来获取旧的文本框值。

请检查以下代码：

function minus(){
	var oldVal = parseInt(document.getElementById("myVal").value);	
	oldVal--;
	document.getElementById("myVal").value = oldVal;

  }
function add(){
	var oldVal = parseInt(document.getElementById("myVal").value);	
	oldVal++;
	document.getElementById("myVal").value = oldVal;
}

<div class="productForm">
  <form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
	  <div class="+-Buttons">
		  Quantity <br>
		<input type="button" value="-" onClick="minus()">
		<input type="text" id="myVal" name="count" value="0">
		<input type="button" value="+" onClick="add()">
	  </div>
	</form>
</div>

【讨论】：

【解决方案5】：

你有两个函数minus，其中一个必须是add
如果你想使用属性name 来选择，你需要使用类似的东西：

document.getElementsByName("count")[0].tagName

【讨论】：