编码初学者需要帮助

Posted 2021-04-11

我是编码的新手。我创建了一个包含三个字段的表单-两个带有“数字”类型的字段和一个带有单选按钮选择的字段。我正在尝试利用“尝试捕获”来验证这些字段并使错误消息回显到屏幕上（而不是作为警报）。我知道这里有很多代码，但是我真的迷失了。这是我的html和js：

HTML：

<form>
    <fieldset>
        <label for="hshld" class="formhdr">Total number of people in your household:</label>
        <input type="number"  id="hshld" name="hshld" min="1">
    </fieldset>
    <fieldset>
        <label for="hrrisk" class="formhdr">Number of high-risk people in your household:</label>
        <input type="number"  id="hrrisk" name="hrrisk" min="0">
    </fieldset>
    <fieldset>
        <legend class="formhdr">Number of weeks in isolation:</legend>
        <input type="radio" id="countone" name="headcount">
        <label for="countone" class="numweeks">1</label>
        <input type="radio" id="counttwo" name="headcount">
        <label for="counttwo" class="numweeks">2</label>
        <input type="radio" id="countthree" name="headcount">
        <label for="countthree" class="numweeks">3</label>
        <input type="radio" id="countfour" name="headcount">
        <label for="countfour" class="numweeks">4+</label>
    </fieldset>
    <input type="submit" value="Submit" id="submit">
</form> 

和我的.js：

//Global variables
    var hshld = document.getElementById("hshld");
    var mysubmit = document.getElementById("submit");
    var radioError = document.getElementById("radioError");
    var weekCount;

//this function checks to see if the user entered a number into the field
    function validatehshld() {
        try {
            if (hshld.value == "") {
                throw "Enter a number!";
            }
            hshld.style.outline = "none";
            // clear input box
        }
        catch (hshldError) {
            hshld.style.outline = "2.5px dashed red";
            hshld.placeholder = hshldError;
            return false;
        }
    }

// makes sure that the radio button is selected. If not, throws an error message into the "radioError" paragraph at under the form.
    function validatewkCount() {
        try {
            if (weekCount == 0) {
                throw document.getElementById('radioError').innerHTML = "Select a number!";
                    }
// clear input box
                    hshld.style.outline = "none"; 
                    }
                    catch (weekCountError) {
                        radioError.style.outline = "2.5px dashed red";
                        radioError.placeholder = radioError;
                        return false;
                    }
    }

// stop the form from submitting if a field needs attention
    function endEvent() {
        return event.preventDefault();
    }

    function validateSubmit() {
        if(validatehshld() === false && validatewkCount() === false) {
            endEvent();
        }
    }

// EventListeners, includes IE8 compatibility
        if (hshld.addEventListener) {
            hshld.addEventListener("focusout", validatehshld, false);
        } else if (hshld.attachEvent) {
        hshld.attachEvent("onclick", validatehshld);
        }

// runs validateSubmit() function when the user clicks the submit button
        if (mysubmit.addEventListener) {
            mysubmit.addEventListener("click", validateSubmit, false);
        } else if (mysubmit.attachEvent) {
            mysubmit.attachEvent("onclick", validateSubmit);
        }

        if (mysubmit.addEventListener) {
            mysubmit.addEventListener("click", numBottles, false);
        } else if (mysubmit.attachEvent) {
            mysubmit.attachEvent("onclick", numBottles);
        }

// this function gets called via the onclick attribute (line 44)
    function numBottles() {

// takes the current value of the input field from id "hshld"
        var people = document.getElementById("hshld").value;
        var hrrisk = document.getElementById("hrrisk").value;

        // this variable represents the number of gallons a single person should have for one week of isolation- 1 gallon per day
        var weekWater = 7; 

        // this variable will hold the number of weeks selected from the radio buttons
        var weekCount;

// this code determines which radio button is selected and assigns a value to the variable depending on which radio button is selected
        if (document.getElementById('countone').checked) {
            var weekCount = 1; 
        } else if (document.getElementById('counttwo').checked) {
            var weekCount = 2;
        } else if (document.getElementById('countthree').checked) {
            var weekCount = 3;
        } else if (document.getElementById('countfour').checked) {
            var weekCount = 4;
        } else if (isNaN(weekCount) === true) {
            var weekCount = 0; 
        }

// echo out the calculation (people X weekWater) to the span object with id=bottles
                document.getElementById("bottles").innerHTML = (people * weekWater * weekCount) + (hrrisk * weekCount);
                }

答案

尝试在此处不要使用try，catch或throw，而是在新元素中创建错误消息，并将其放在html看起来不错的位置。

我只会使用：

if (typeof hshld.value !== 'number') { // if a wrong data type was entered

    document.getElementById("error-zone").innerHTML += "<div>Enter a number!</div"

} else {

    // continue calculating answer

}

用于快速而肮脏的方法。