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

我正在创建一个表单,该表单将有多个项目可供选择并签入(添加/增加)和签出(减/减),它仅在笔记本电脑变量等于 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>


侃侃尔雅
浏览 204回答 2
2回答

噜噜哒

这里有很多问题:1-form.option1不是访问带有 id 的复选框的有效方式option1。使用document.getElementById("option1")来代替。同样适用于optionin和optionout2- 您的按钮类型为“提交”,它将重新加载页面并重置您的变量laptop(除非您使用 cookie 或 localStorage 保存它)。防止按钮刷新页面的一种简单方法是将其类型更改为“按钮”。3- 正如@obscure 的回答所指出的,您应该laptop在updateCount函数之外声明您的变量。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) {&nbsp; &nbsp; var laptop = document.getElementById("option1");&nbsp; &nbsp; var option_in = document.getElementById("checkIn");&nbsp; &nbsp; var option_out = document.getElementById("checkOut");&nbsp; &nbsp; if (laptop.checked && option_in.checked) {&nbsp; &nbsp; &nbsp; &nbsp; laptop++;&nbsp; &nbsp; &nbsp; &nbsp; alert ("Your response has been recorded - Check In");&nbsp; &nbsp; }&nbsp; &nbsp; if (laptop.checked && option_out.checked) {&nbsp; &nbsp; &nbsp; &nbsp; laptop--;&nbsp; &nbsp; &nbsp; &nbsp; alert ("Your response has been recorded - Check Out");&nbsp;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; if (laptop.checked && option_out.checked && laptop===0) {&nbsp; &nbsp; &nbsp; &nbsp; alert ("Item currently unavailable, choose another item");&nbsp; &nbsp; }}<!DOCTYPE html><html><h1>CS Equipment Renatal Form</h1><form>&nbsp; &nbsp; <!--top of form with name and line break for text, don't need&nbsp;anything with the Name: -->&nbsp; &nbsp; Name:<br>&nbsp; &nbsp; <!--creating the variable type for textfield and the name of it which&nbsp;is fullname-->&nbsp; &nbsp; <input type="text" name="fullname"><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--email textfield with line break after meaning new line-->&nbsp; &nbsp; OU Email:<br>&nbsp; &nbsp; <input type="email" name="ouemail"><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--doing the checkboxes for rental types with id since the id is&nbsp;used in the script -->Equipment Rental Type<br>&nbsp; &nbsp; Laptop <input type="checkbox" name="option1" value="laptop"&nbsp;id="option1"><br>&nbsp; &nbsp; Tablet <input type="checkbox" name="option2" value="tablet"&nbsp;id="option2"><br>&nbsp; &nbsp; Monitor <input type="checkbox" name="option3" value="monitor"&nbsp;id="option3"><br>&nbsp; &nbsp; Camera <input type="checkbox" name="option4" value="camera"&nbsp;id="option4"><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--doing checkboxes for checkout and check with id because its used&nbsp;in script-->&nbsp; &nbsp; Select One<br>Check In <input type="radio" name="changeQty" value="checkIn"&nbsp;id="checkIn"><br>&nbsp; &nbsp; Check Out <input type="radio" name="changeQty" value="checkOut"&nbsp;id="checkOut"><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--adding submit button and associating it with script function-->&nbsp; &nbsp; <input type="button" name="submit" value="submit"&nbsp;onClick="updateCount(this.form)"></form></html>为了laptop在页面刷新时保存变量,请考虑使用 cookie、localStorage 或某些服务器端脚本。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript