CODEWITHSUNDEEP
javascript
pankracy bonifacy
pankracy bonifacy

Reputation: 13

Shortcut within a function?

I'm a total noob an only started learning JS several days ago. I'm somewhat familiar with html and css though. I created this code as an exercise. It tells wheter the number put in the form is positive, negative or 0. I also wanted it to list all the numbers used. However, I don't want the app to list the result (e.g. "Positive number") if someone mistakenly hits "Check" before typing in another number. My only solution was to add the document.create.element part after each condition. But I feel that there should be a simpler way, is it possible to wite it just once and then just invoke a kind of shortcut for it in the two remaining conditional statements?

<!DOCTYPE html>
<html>

<head>
    <title>What number is it?</title>
</head>

<body>
    <input type="text" name="numer" id="number">
    <button onclick="calculate()" id="przycisk">Check</button>
    <div id="div1"></div>
    <script>
        function calculate() {
            var num = document.getElementById("number").value;
            if (num > 0) {
                var para = document.createElement("p");
                var node = document.createTextNode(num);
                para.appendChild(node);
                var element = document.getElementById("div1");
                element.appendChild(para);
                number.value = "Positive number";
            }
            if (num == 0) {
                var para = document.createElement("p");
                var node = document.createTextNode(num);
                para.appendChild(node);
                var element = document.getElementById("div1");
                element.appendChild(para);
                number.value = 0;
            }
            if (num < 0) {
                var para = d ocument.createElement("p");
                var node = d ocument.createTextNode(num);
                para.appendChild(node);
                var element = d ocument.getElementById("div1");
                element.appendChild(para);
                number.value = "Negative number";
            }
        }
    </script>
</body>

</html>

Upvotes: 0

Views: 76

Answers (2)

yajiv
yajiv

Reputation: 2941

I think you want something like below. I just removed all duplicate code, call it only once if enter value by user is number and remove if/else as well.(like below)

function calculate() {
  var num = document.getElementById("number").value;
  if(!isNaN(num)){
    number.value = (num > 0) ? "Positive number" 
                  :(num < 0) ? "Negative number"
                  : "0";
    
    var para = document.createElement("p");
    var node = document.createTextNode(num);
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  }
}
<!DOCTYPE html>
<html>

<head>
    <title>What number is it?</title>
</head>

<body>
    <input type="text" name="numer" id="number">
    <button onclick="calculate()" id="przycisk">Check</button>
    <div id="div1"></div>
</body>

</html>

Upvotes: 1

georg
georg

Reputation: 214959

You should never rely on Javascript's implicit type conversion rules. If you want to compare a variable to a number, make sure that this variable is a valid number in the first place.

Here's a corrected copy of your code (although I agree with the commenter that displaying the result in the input box is quite unconventional).

<!DOCTYPE html>

<html>
<head>
	<title>What number is it?</title>

</head>
<body>

<input type="text" name="numer" id="number">
<button onclick="calculate()" id="przycisk">Check</button> 
<div id="div1"></div>

<script>

function calculate() {
    var num = Number(document.getElementById("number").value);

    if (Number.isNaN(num)) {
        // not a number, do nothing
        return;
    }

    var message = "0";

    if (num < 0)
        message = "Negative number";
    else if (num > 0)
        message = "Positive number";

    number.value = message;

    var para = document.createElement("p");
    para.appendChild(document.createTextNode(num));
    document.getElementById("div1").appendChild(para);
}
	

</script>


</body>
</html>

This way, the flow is more logical and there's no need to repeat any code.

Upvotes: 0

Related Questions