如果用户输入的数字超出范围，如何输出错误消息？

Question

我的目标是不允许用户输入＆lt; 0或＆gt; 400.如果他们这样做，输出一个红色的错误信息给div＃results和'return'。我设置了一个if语句，但只有当用户没有选择单选按钮（折扣）时才会起作用。

function calcTotal() {

    var msg;
    var weight = parseInt( document.getElementById("weight").value );
    var total;
    var totalAfterDiscount;

    if( weight >= 0 && weight <= 150 ) {

        total = weight * 20 
    }   
    else if( weight >150 && weight <= 300 ) {

        total = weight * 15 
    }   
    else if( weight >300 && weight <= 400 ) {

        total = weight * 10 
    }

    if( weight < 0 || weight > 400) {

        msg = "<div>Weight is out of range!</div>";
    }

    if( document.getElementById("50%").checked == true ) {

        totalAfterDiscount = total * 0.50;
        msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    }

    if( document.getElementById("25%").checked == true ) {

        totalAfterDiscount = total * 0.25;
        msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    }

    if( document.getElementById("none").checked == true ) {

        totalAfterDiscount = total;
        msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    }
    // send output to browser

    document.getElementById("results").innerHTML = msg;

Answer 1

你正在覆盖msg变量 将错误消息汇总到msg变量试试这个

    function calcTotal() {
    var msg;
    var weight = parseInt( document.getElementById("weight").value );
    var total;
var totalAfterDiscount;

if( weight >= 0 && weight <= 150 ) {

    total = weight * 20 
}   
else if( weight >150 && weight <= 300 ) {

    total = weight * 15 
}   
else if( weight >300 && weight <= 400 ) {

    total = weight * 10 
}

if( weight < 0 || weight > 400) {

    msg = "<div>Weight is out of range!</div>";
}

if( document.getElementById("50%").checked == true ) {

    totalAfterDiscount = total * 0.50;
    msg += "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
}

if( document.getElementById("25%").checked == true ) {

    totalAfterDiscount = total * 0.25;
    msg += "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
}

if( document.getElementById("none").checked == true ) {

    totalAfterDiscount = total;
    msg += "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
}
// send output to browser

document.getElementById("results").innerHTML = msg;

}

即使您想一次显示单个消息，也可以尝试使用

    function calcTotal() {
    var msg;
    var weight = parseInt( document.getElementById("weight").value );
    var total;
var totalAfterDiscount;

if( weight >= 0 && weight <= 150 ) {

    total = weight * 20 
}   
else if( weight >150 && weight <= 300 ) {

    total = weight * 15 
}   
else if( weight >300 && weight <= 400 ) {

    total = weight * 10 
}

if( weight < 0 || weight > 400) {

    msg = "<div>Weight is out of range!</div>";
   return;
}

if( document.getElementById("50%").checked == true ) {

    totalAfterDiscount = total * 0.50;
    msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    return;
}

if( document.getElementById("25%").checked == true ) {

    totalAfterDiscount = total * 0.25;
    msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    return;
}

if( document.getElementById("none").checked == true ) {

    totalAfterDiscount = total;
    msg = "<div> Your total cost is: $" + totalAfterDiscount + "</div>";
    return;
}
// send output to browser

document.getElementById("results").innerHTML = msg;

}