Question

我想让“ COST”输入字段突出显示为红色，如果用户单击“ CALCULATE”按钮时未填写该错误，则标记一个错误。

我找到的解决方案是使用一个表单标签，但是看起来这只是在您单击“计算”后立即清除了我的输出。

我仍然是初学者，因此，我感谢任何简单的解决方案或周到的解释：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">    
    <title>Document</title>
</head>
<body>
    <form>
        Cost: <input type="number" step="0.01" name="cost" autocomplete="off" required><br>
        <br>Shipping:
        <br><input type="radio" name="shipping" value="small_poly" checked="true">Small Poly Bag
        <br><input type="radio" name="shipping" value="small_box" autocomplete="off">Small Box
        <br><input type="radio" name="shipping" value="large_box" autocomplete="off">Large Box
        <br><input type="radio" name="shipping" value="other" autocomplete="off">Other 
        <input type="number" step="0.01" name="other_value" autocomplete="off"><br>
    
        <br><button id="calculateButton" type="submit">Calculate</button><br>
        
        <div class="return-values-container">
            <div id="min">Min</div>
            <div id="min_value">0</div>
            <div id="max">Max</div>
            <div id="max_value">0</div>
        </div>
    </form>
    <script>
        document.getElementById("calculateButton").addEventListener("click", function(){
            if(document.querySelector('input[name="cost"]').validity.valid==''){
                var cost = 0;
            } else {var cost = parseFloat(document.querySelector('input[name="cost"]').value);}

            var shipping = document.querySelector('input[name="shipping"]:checked').value

            if(shipping=="other"){
                var other_input = parseFloat(document.querySelector('input[name="other_value"]').value)
                if(other_input==''){
                    console.log('other_input:'+other_input, 'please enter a value')
                } else {shipping=other_input}
            }

            var min;
            var max;

            var small_poly_price = 3.90
            var small_box_price = 3.50;
            var large_box_price = 6.98;

            // MIN CALCULALATION
            switch(shipping) {
                case "small_poly":
                    min = (1.2*cost)+small_poly_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                    console.log(min);
                    break;
                case "small_box":
                    min = (1.2*cost)+small_box_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2); 
                    console.log(min);
                    break;
                case "large_box":
                    min = (1.2*cost)+large_box_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                    console.log(min);
                    break;
               default:
                   min = (1.2*cost)+other_input+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                   console.log(min);
                   break;
            }
            // MAX CALCULATION
            max = 1.1*(cost*2);
            document.getElementById('max_value').innerHTML = '$'+max.toFixed(2);
        });
    </script>
</body>
</html>

Answer 1

向您的事件监听器添加阻止默认设置，以防止默认功能（由于html表单标签而导致页面重新加载）

 document.getElementById("calculateButton").addEventListener("click", function(e){
         e.preventDefault();
....

示例：https://jsfiddle.net/7hqk4gtf/2/

提交后清除表格

1 个答案: