I used multiple If's in my code and it one of them is not working. Can someone show me where I-CodePudding

I need to make those "If's" below work together ("If" inputs's value less than 1900, I need message display "Please enter a valid year" and "If" Dog's age higher than 14, I need message display as "Your dog completed its life span" message at third sentance. However only one them works and sometimes other one. But not working together. Can someone show me where I do wrong here? thank you.

function calc() {
    let x = document.getElementById("year").value
    let current = new Date().getFullYear()
    let age = current - Number(x)
    let trans = age * 7
    let remain = 15 - age
    let msg ="Your dog is "   age   " years old. Your dog's human race is "   trans   ". Your dog has "   remain   " years to complete its life span."
    document.getElementById("result").innerHTML= msg

    if (x < 1900) {
        document.getElementById("result").innerHTML="Please enter a valid year." 
    }

    if (remain <= 0) {
        document.getElementById("result").innerHTML= "Your dog is "   age   " years old. Your dog's human race is "   trans   ". Your dog completed its life span."
    }
}

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Page</title>
</head>
<body>

    <h1>Dog Age Calculate</h1>
    <b>Please enter your dog's birth of year:</b><br><br>
    <input type="number" id="year" required min="1900" max="2022"><br><br>
    <button onclick="calc()">Calculate</button><br>
    <p id="result"></p>

<script src="Chasm.js"></script>
</body>
</html>

CodePudding user response：

You are not leaving your function when your if case is triggered. Therefore it is possible that after the first if the second ifis triggered as well.

You have a few options here.

Option 1:

return from the function if any if case is triggered.

    if (x < 1900) {
        return document.getElementById("result").innerHTML="Please enter a valid year." 
    }

    if (remain <= 0) {
        return document.getElementById("result").innerHTML= "Your dog is "   age   " years old. Your dog's human race is "   trans   ". Your dog completed its life span."
    }

    //set the msg at the end of the function so you are checking your if statements before
    document.getElementById("result").innerHTML= msg

Option 2:

use if / else

    if (x < 1900) {
        document.getElementById("result").innerHTML="Please enter a valid year." 
    } else if (remain <= 0) {
        document.getElementById("result").innerHTML= "Your dog is "   age   " years old. Your dog's human race is "   trans   ". Your dog completed its life span."
    } else {
        document.getElementById("result").innerHTML= msg
    }

You could also improve performance when setting the first if directly under your assigned variable. If that case matches, you don't need the further calculations.

let x = document.getElementById("year").value
if (x < 1900) {
    return document.getElementById("result").innerHTML="Please enter a valid year." 
}
....