Prompt User for Input but display Input on Form

Question

Good Morning,

Does anyone know how to correct the code below? First, I prompt the user for the variables first and second but am failing to have them display on the form. Second, when the user clicks on the Determine the larger number button it is supposed to run the if and else if statement located under the function determineLarge(){ but it fails to run. My apologies as I am learning at the university to code this language. Thank you for the help.

 <script>
        function determineLarge(){

        let first = prompt ("Enter the first number.");
            first= document.myForm.first.value;
    
        let second = prompt("Enter the second number.");
            second =document.myForm.first.value;

            first = parseFloat(first);
            second = parseFloat(second);

            let message = "";

            if (first <0 || second <0){
                message = "You can't use negative numbers.";
                }
            else if (first > second){
                message = "The second number" + "(" + second + ")" + " is smaller.";
                }
                else if (second > first) {
                    message = "The first number" + "(" + first + ")" + " is smaller.";
                }
                else if (first == second || second==first){
                    message = "The first number" + "(" + first + ")" + " is smaller.";
                }

        document.getElementById("results").innerHTML = message;
        }        
</script>
</head>

<body>
    <h1>Gary's Smaller of Two Numbers</h1>
    <form name="myForm">
    <p> Enter the first number</p>
    <input type="number" name="first" value="" onclick="javascript:determineLarge();">
    <p>Enter the second number</p>
    <input type="number" name="second" value="" onclick="javascript:determineLarge();">
    <button type="button" onclick="determineLarge();">Determine the larger number</button>
     </form>
    <div id="results"> </div>

</body>

I think you mean to reverse the right and left sides of the = on these lines: second =document.myForm.first.value;. The first and second variables have already been set, so now you need to set the form input values by assigning them... by putting them on the left and assigning the first or second value from the right. — Marc
– Marc, Commented Oct 19, 2020 at 17:26

imvain2 · Accepted Answer · 2020-10-19 17:27:19Z

I separated the getting of the values and processing of them into two functions.

I put the prompts in a while loop so you are forced to enter in a real value greater than zero.

Also you overwrite the first and second variables by keeping the variable name first ie: first = .... instead of document.myform.value == first etc..

first = -1;
second = -1;

function getValues(){
     while(isNaN(first) || first == "" || first < 0){
        first = prompt ("Enter the first number.");
     }
     
     while(isNaN(second) || second == "" || second < 0){
        second = prompt ("Enter the second number.");
     }
     
     document.myForm.first.value = first;
     document.myForm.second.value = second;
}

function determineLarge(){
            let message = "";

            if (first > second){
                message = "The second number" + "(" + second + ")" + " is smaller.";
                }
                else if (second > first) {
                    message = "The first number" + "(" + first + ")" + " is smaller.";
                }
                else if (first == second || second==first){
                    message = "The first number" + "(" + first + ")" + " is smaller.";
                }

        document.getElementById("results").innerHTML = message;
        }

<h1>Gary's Smaller of Two Numbers</h1>
    <form name="myForm">
    <p> Enter the first number</p>
    <input type="number" name="first" value="" onclick="javascript:getValues();">
    <p>Enter the second number</p>
    <input type="number" name="second" value="" onclick="javascript:getValues();">
    <button type="button" onclick="determineLarge();">Determine the larger number</button>
     </form>
    <div id="results"> </div>

Rane · Accepted Answer · 2020-10-19 17:32:51Z

I removed the prompt so that the inputs can be used. No need to call onClick on the text input.

<script>
  function determineLarge(myForm) {

    var first = myForm.first.value;

    var second = myForm.second.value;

    console.log(first, second)

    first = parseFloat(first);
    second = parseFloat(second);

    let message = "";

    if (first < 0 || second < 0) {
      message = "You can't use negative numbers.";
    } else if (first > second) {
      message = "The second number" + "(" + second + ")" + " is smaller.";
    } else if (second > first) {
      message = "The first number" + "(" + first + ")" + " is smaller.";
    } else if (first == second || second == first) {
      message = "The first number" + "(" + first + ")" + " is smaller.";
    }

    document.getElementById("results").innerHTML = message;
  }
</script>
</head>

<body>
  <h1>Gary's Smaller of Two Numbers</h1>
  <form name="myForm">
    <p> Enter the first number</p>
    <input type="number" name="first" value="">
    <p>Enter the second number</p>
    <input type="number" name="second" value="">
    <button type="button" onclick="determineLarge(this.form);">Determine the larger number</button>
  </form>
  <div id="results"> </div>

</body>

Collectives™ on Stack Overflow

Prompt User for Input but display Input on Form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related