我的 javascript 代码在 if 语句中没有递增/递减

Question

我正在创建一个表单，该表单将有多个项目可供选择并签入（添加/增量）和签出（减/减），它仅在笔记本电脑变量等于 1 时才有效。我想设置一个项目的总量，然后他们选择的任何选项都会增加或减少与该项目关联的变量。我也想不出一种方法来确保每次表单关闭并再次打开时变量都不会重置。

    function updateCount (form) {
	    //need to figure out way for count to not reset to total when closing 
    form
	    //only works when set to 1
	    var laptop=1;
	    if (form.option1.checked && form.optionin.checked) {
		    laptop++;
		    alert ("Your response has been recorded");
	    }
	    if (form.option1.checked && form.optionout.checked) {
		    laptop--;
		    alert ("Your response has been recorded"); 
	    } 
	    if (form.option1.checked && form.optionout.checked && laptop===0) {
		    alert ("Item currently unavailable, choose another item");
	    }}

    <h1>CS Equipment Renatal Form</h1>
    <form>
	    <!--top of form with name and line break for text, don't need 
    anything with the Name: -->
	    Name:<br>
	    <!--creating the variable type for textfield and the name of it which 
    is fullname-->
	    <input type="text" name="fullname"><br>
	    <br>
	    <!--email textfield with line break after meaning new line-->
	    OU Email:<br>
	    <input type="email" name="ouemail"><br>
	    <br>
	    <!--doing the checkboxes for rental types with id since the id is 
    used in the script -->
    Equipment Rental Type<br>
	    Laptop <input type="checkbox" name="option1" value="laptop" 
    id="option1"><br>
	    Tablet <input type="checkbox" name="option2" value="tablet" 
    id="option2"><br>
	    Monitor <input type="checkbox" name="option3" value="monitor" 
    id="option3"><br>
	    Camera <input type="checkbox" name="option4" value="camera" 
    id="option4"><br>
	    <br>
	    <!--doing checkboxes for checkout and check with id because its used 
    in script-->
	    Select One<br>
	Check In <input type="checkbox" name="optionin" value="checkIn" 
    id="checkOut"><br>
	    Check Out <input type="checkbox" name="optionout" value="checkOut" 
    id="checkIn"><br>
	    <br>
	    <!--adding submit button and associating it with script function-->
	    <input type="submit" name="submit" value="submit" 
    onClick="updateCount(this.form)">

    </form>

Answer 1

我认为var laptop=1; 应该包含可用笔记本电脑的数量。

这里的问题是你在应该实际管理它的函数中声明它 - 所以你基本上是在每次调用这个函数时重置它。

要解决此问题，您需要将其设为全局变量 - 在 function updateCount (form) { } 之前和之外定义的变量。

此外，您应该摆脱输入字段上的 onclick 事件，而是使用表单本身的 onsubmit 事件。这样您就可以在表单实际提交之前对其进行验证。

看看这个例子：

var laptop = 1;

function updateCount(form) {

  if (form.option1.checked && form.optionin.checked) {
    laptop++;
    alert("Your response has been recorded");
    return true;
  }
  if (form.option1.checked && form.optionout.checked) {
    laptop--;
    alert("Your response has been recorded");
    return true;
  }
  if (form.option1.checked && form.optionout.checked && laptop === 0) {
    alert("Item currently unavailable, choose another item");
    return false;
  }
  return false;
}

<h1>CS Equipment Renatal Form</h1>
<form onsubmit="return updateCount(this)">
  <!--top of form with name and line break for text, don't need 
anything with the Name: -->
  Name:<br>
  <!--creating the variable type for textfield and the name of it which 
is fullname-->
  <input type="text" name="fullname"><br>
  <br>
  <!--email textfield with line break after meaning new line-->
  OU Email:<br>
  <input type="email" name="ouemail"><br>
  <br>
  <!--doing the checkboxes for rental types with id since the id is 
used in the script -->
  Equipment Rental Type<br> Laptop <input type="checkbox" name="option1" value="laptop" id="option1"><br> Tablet <input type="checkbox" name="option2" value="tablet" id="option2"><br> Monitor <input type="checkbox" name="option3" value="monitor" id="option3"><br>  Camera <input type="checkbox" name="option4" value="camera" id="option4"><br>
  <br>
  <!--doing checkboxes for checkout and check with id because its used 
in script-->
  Select One<br> Check In <input type="checkbox" name="optionin" value="checkIn" id="checkOut"><br> Check Out <input type="checkbox" name="optionout" value="checkOut" id="checkIn"><br>
  <br>
  <!--adding submit button and associating it with script function-->
  <input type="submit" name="submit" value="submit">

Answer 2

这里有很多问题：

1- form.option1 不是访问 ID 为 option1 的复选框的有效方式。请改用document.getElementById("option1")。 optionin 和 optionout 也是如此

2- 您的按钮类型为“提交”，它将重新加载页面并重置您的变量laptop（除非您使用 cookie 或 localStorage 保存它）。防止按钮刷新页面的一种简单方法是将其类型更改为“按钮”。

3- 正如@obscure 的回答所指出的，您应该在updateCount 函数之外声明您的变量laptop。

4- 我相信您不希望用户同时选择“签入”和“签出”。为此，请使用单选按钮而不是复选框（请注意，两个单选按钮具有相同的 name 属性，因此您不能同时选择两者）。

var laptop=1; //will not reset as long as the page is not refreshed
//a way of preventing the from from refreshing the page is to change the button type to "button"

function updateCount (form) {
    var laptop = document.getElementById("option1");
    var option_in = document.getElementById("checkIn");
    var option_out = document.getElementById("checkOut");
    if (laptop.checked && option_in.checked) {
        laptop++;
        alert ("Your response has been recorded - Check In");
    }
    if (laptop.checked && option_out.checked) {
        laptop--;
        alert ("Your response has been recorded - Check Out"); 
    } 
    if (laptop.checked && option_out.checked && laptop===0) {
        alert ("Item currently unavailable, choose another item");
    }
}

<!DOCTYPE html>
<html>
<h1>CS Equipment Renatal Form</h1>
<form>
    <!--top of form with name and line break for text, don't need 
anything with the Name: -->
    Name:<br>
    <!--creating the variable type for textfield and the name of it which 
is fullname-->
    <input type="text" name="fullname"><br>
    <br>
    <!--email textfield with line break after meaning new line-->
    OU Email:<br>
    <input type="email" name="ouemail"><br>
    <br>
    <!--doing the checkboxes for rental types with id since the id is 
used in the script -->
Equipment Rental Type<br>
    Laptop <input type="checkbox" name="option1" value="laptop" 
id="option1"><br>
    Tablet <input type="checkbox" name="option2" value="tablet" 
id="option2"><br>
    Monitor <input type="checkbox" name="option3" value="monitor" 
id="option3"><br>
    Camera <input type="checkbox" name="option4" value="camera" 
id="option4"><br>
    <br>
    <!--doing checkboxes for checkout and check with id because its used 
in script-->
    Select One<br>
Check In <input type="radio" name="changeQty" value="checkIn" 
id="checkIn"><br>
    Check Out <input type="radio" name="changeQty" value="checkOut" 
id="checkOut"><br>
    <br>
    <!--adding submit button and associating it with script function-->
    <input type="button" name="submit" value="submit" 
onClick="updateCount(this.form)">

</form>
</html>

为了在页面刷新时保存 laptop 变量，请考虑使用 cookie、localStorage 或一些服务器端脚本。