www.webdeveloper.com
Results 1 to 13 of 13

Thread: Welcoming A user and Adding Numbers

  1. #1
    Join Date
    Feb 2014
    Posts
    12

    Welcoming A user and Adding Numbers

    How do I do the following "in sequence" using JS:

    a) Welcome the visitor
    b) Prompt the visitor for his name
    c) Display the users name on the screen
    d) Ask the visitor to enter two numbers
    e) Add these two visitor entered numbers and add them together and returns the result to the visitor
    f) Thank the user for using the program

    Thanks in advance.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Have you tried to do it by yourself?

  3. #3
    Join Date
    Feb 2014
    Posts
    12
    Yes but I did it as two separate files:
    a) Welcome the visitor
    b) Prompt the visitor for his name
    c) Display the users name on the screen

    and then:
    d) Ask the visitor to enter two numbers
    e) Add these two visitor entered numbers and add them together and returns the result to the visitor
    f) Thank the user for using the program

    I did them separately but I failed to do it in one file.

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
    var y;

    var visitor = prompt("Enter your name");

    if (visitor!=null)
    {
    y = "Hi " + visitor;
    document.getElementById("Part").innerHTML=y;
    }

    }
    </script>

    </head>

    <body>
    <p>Welcome Visitor.</p>

    <button onclick="myFunction()">Click Next to Proceed</button>
    <p id="Part"></p>
    </body>
    </html>






    <html>

    <head>
    <script>

    function myFunction() {
    var y = document.getElementById("txt1").value;
    var z = document.getElementById("txt2").value;
    var x = +y + +z;
    document.getElementById("demo").innerHTML = x;
    }
    </script>
    </head>

    <body>

    <p>Enter two (2) numbers so I can add them for you:</p>
    Enter first number:
    <input type="text" id="txt1" name="text1">Enter second number:
    <input type="text" id="txt2" name="text2"><br><br>

    <button onclick="myFunction()">Add Numbers</button>

    <p id="demo"></p>
    </body>
    </html>

  4. #4
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    There's no need for two separate files nor more than one function. You can define your myFunction() and place everything in there and just execute necessary statements.

    For example:

    Code:
    function myFunction()
    {
    var y;
    
    var visitor = prompt("Enter your name");
    
    if (visitor!=null)
    {
    y = "Hi " + visitor;
    document.getElementById("Part").innerHTML=y;
    }
    
    var num1 = +prompt("Please enter one number: ","");
    var num2 = +prompt("Please enter one number: ","");
    
    alert("The sum of two entered numbers is: " + (num1 + num2));
    
    //continue your statements here
    
    }
    Please place your code inside of the CODE tags.
    Last edited by tech_soul8; 02-09-2014 at 02:27 PM.

  5. #5
    Join Date
    Feb 2014
    Posts
    12
    Thank you very much for your help. It's almost there.

    Right now, the name is displayed in the background at the same time it is prompting to enter the first number.
    I want the name to display on the screen, then click "next" before I am prompted for the first number to be entered.

    Thanks again,

  6. #6
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    How do you mean "on the screen"? You want it to be displayed inside of an alert box (like the sum of numbers) or to be displayed on a web page?

  7. #7
    Join Date
    Feb 2014
    Posts
    12
    One more minor issue I'm having is: the name is displayed properly on the screen in the background but as soon as I enter the 2nd number and the total is displayed ---> the name in the background changes to NaN. Please advise.

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Post your code so we can see what have you added and where's the error...

  9. #9
    Join Date
    Feb 2014
    Posts
    12
    Sorry for not being clear. By on the screen, I meant on the webpage.

    <!DOCTYPE html>
    <html>
    <head>

    <script>
    function myFunction()
    {
    var y;

    var visitor = prompt("Enter your name");

    if (visitor!=null)
    {
    y = "Hi " + visitor;
    document.getElementById("Part").innerHTML=y;
    }

    var num1 = +prompt("Please enter FIRST number: ","");
    var num2 = +prompt("Please enter SECOND number: ","");

    var a = document.getElementById("Part").value;
    var z = document.getElementById("Part").value;
    var x = +a + +z;

    document.getElementById("assign4Part").innerHTML = x;


    window.alert("The SUM of the two (2) numbers is: " + (num1 + num2));

    window.alert("Thank you for using the program");

    }
    </script>

    </head>

    <body>

    <p>Welcome Visitor.</p>
    <button onclick="myFunction()">Click Next to Proceed</button>
    <p id="Part"></p>

    </body>
    </html>

  10. #10
    Join Date
    Feb 2014
    Posts
    12
    This version:

    <!DOCTYPE html>
    <html>
    <head>

    <script>
    function myFunction()
    {
    var y;

    var visitor = prompt("Enter your name");

    if (visitor!=null)
    {
    y = "Hi " + visitor;
    document.getElementById("Part").innerHTML=y;
    }

    var num1 = +prompt("Please enter FIRST number: ","");
    var num2 = +prompt("Please enter SECOND number: ","");

    var a = document.getElementById("Part").value;
    var z = document.getElementById("Part").value;
    var x = +a + +z;

    document.getElementById("Part").innerHTML = x;


    window.alert("The SUM of the two (2) numbers is: " + (num1 + num2));

    window.alert("Thank you for using the program");

    }
    </script>

    </head>

    <body>

    <p>Welcome Visitor.</p>
    <button onclick="myFunction()">Click Next to Proceed</button>
    <p id="Part"></p>

    </body>
    </html>

  11. #11
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Hm... I really wanted you to try to get it work but I'm pretty tired and planning go to sleep so I'll help you by doing it instead of you. If you're curious why your code fails let us now and somebody will assist you to get it working... Right now, at the first glance, you have several errors...

    Here's the code, hope this is what you are looking for:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Untitled</title>
      <script type="text/javascript">
        function addNumbers() {
          var msg = "Please enter a number: ", x = +prompt(msg,""), y = +prompt(msg,"");
          
          document.write("The sum of two entered numbers is: " + (x + y));
        }
        
        alert("Hi, " + prompt("Please enter your name: "));
      </script>
    </head>
    <body>
      <input type="button" onclick="addNumbers()" value="Next" />
    </body>
    </html>

  12. #12
    Join Date
    Feb 2014
    Posts
    12
    I just want to thank you for your time and kind assistance.

  13. #13
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    You're welcome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles