SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: span in prompt

  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    span in prompt

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Click the button to demonstrate the prompt box.</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction()
    {
    var x;
    
    var nr=prompt("Please enter number","number1");
    var nr2=prompt("Please enter number","number2");
    
    
    
    
      
      x=parseInt(nr)+parseInt(nr2)+<span style="color:blue">nr-nr2</span> 
    
      document.getElementById("demo").innerHTML=x;
      
    }
    </script>
    
    </body>
    </html>

    Please, what is wrong here?
    I just want to get second number couored blue...
    Can someone help me?
    Many thanks!
    Last edited by Pullo; Dec 21, 2013 at 05:56. Reason: Added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The problem is this line:

    Code:
    x=parseInt(nr)+parseInt(nr2)+<span style="color:blue">nr-nr2</span>
    You cant' just add HTML to a calculation like that.

    Here's a better way:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Colour me blue</title>
        <style>p#result{ color: blue; }</style>
      </head>
      
      <body>
        <p>Click the button to demonstrate the prompt box.</p>
        <button id="myButton">Try it</button>
        <p id="result"></p>
    
        <script>
          function addTwoNumbers(){
            var nr1 = prompt("Please enter number", "number1");
            var nr2 = prompt("Please enter a second number", "number2");
            var result = Number(nr1) + Number(nr2);
            document.getElementById("result").innerHTML = result;
          }
    
          var button = document.getElementById("myButton");
          button.addEventListener('click', addTwoNumbers, false);
        </script>
      </body>
    </html>
    Notice the separation of HTML, CSS and JS.
    If you can get used to doing this from the start, this will help you write better code.

    If you have any questions, just ask.

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello!
    Please, I want just the second result (nr1-nr2) to be blue, and the first result to be red!

    And, I would like to get each result in its own line!
    Please, can somone help?
    Many thanks!

  4. #4
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please, how to get each result in other line and in other color (with span)

    Please, here is the code:

    Code HTML4Strict:
    <!DOCTYPE html>
    <html>
    <body>
     
    <p>Click the button to demonstrate the prompt box.</p>
     
    <button onclick="myFunction()">Try it</button>
     
    <p id="demo"></p>
     
    <script>
    function myFunction()
    {
    var x;
     
    var nr1=prompt("Please enter nr1","number1");
    var nr2=prompt("Please enter nr2","number2");
     
     
     
      x=parseInt(nr1) + parseInt(nr2)+'\n'+nr1-nr2;
      document.getElementById("demo").innerHTML=x;
     
    }
    </script>
     
    </body>
    </html>

    Many thanks!
    Last edited by Mittineague; Dec 21, 2013 at 12:58. Reason: reformatting bbcode tags

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Is this any help?
    Code JavaScript:
    <!DOCTYPE html>
    <html>
    <body>
     
    <p>Click the button to demonstrate the prompt box.</p>
     
    <button onclick="myFunction()">Try it</button>
     
    <p id="demo"></p>
     
    <script>
    function myFunction()
    {
    var x;
     
    var person=prompt("Please enter\r\nyour name","Harry Potter");
     
    if (person!=null)
      {
      x="Hello " + person + "!<br>How are you today?";
      document.getElementById("demo").innerHTML=x;
      }
    }
    </script>
     
    </body>
    </html>

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi mkjs,

    Is there any reason you didn't keep the code Pullo supplied? Or, at least follow his advice
    You cant' just add HTML to a calculation like that
    ?

    This:
    Code:
    x=parseInt(nr1) + parseInt(nr2)+'\n'+nr1-nr2;
    is like a run-on sentence in English.
    1) you need at least 2 statements, not one.
    2) "\n" is meaningless for 'innerHTML'. You need "<br />"

    So, you would need to do something like:

    Code:
    x=parseInt(nr1) + parseInt(nr2);
    y =nr1-nr2;
    document.getElementById("demo").innerHTML= x + "</br>" + y;
    Insofar as the coloring, look at what Pullo did & expand upon it. Hint: you can use more than 1 paragraph or 2 spans, or 2 divs...dependent upon whether this a homework assignment or a learning experience.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, all, but I work at momoent in w3schools online and it does not work.
    I get prompts to imput noumbers, after that I just don't get any resutls.

    <snip>
    Last edited by Pullo; Dec 22, 2013 at 02:44. Reason: We all know the address of W3Schools

  8. #8
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please, how to get each result in other color (red and blue)???

    Please, help!
    Here is the code:

    Code:
    <!DOCTYPE html>
    <html>
     <head>
        <meta charset="utf-8">
        <title>Colour me blue</title>
        <style>p#x{ color: blue; font-weight:bold }</style>
       
      </head>
      
    
    
    
    <body>
    
    <p>Click the button to demonstrate the prompt box.</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="x"></p>
    
    
    <script>
    function myFunction()
    {
    var x;
    
    var nr1=prompt("Please enter nr1","nr1");
    var nr2=prompt("Please enter nr2","nr2");
    
    
      
      x=parseInt(nr1)+parseInt(nr2);
      y=nr1-nr2;
      document.getElementById("x").innerHTML=x+"<br>"+y;
     
      
    }
    </script>
    
    </body>
    </html>
    Many thanks!
    Last edited by Pullo; Dec 22, 2013 at 02:42. Reason: Added code tags

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Two things.

    1. Please use code tags when you post code. Here's how.
    2. Please don't start multiple threads for the same problem.

  10. #10
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mz attemppt with colors...

    Hello!
    This is mz atempt to write out each result inother color.
    Plese do u see wht is wrong_
    Many thanks!!!
    Code:
    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>Colour me blue</title>
        <style>p#x{ color: blue; font-weight:bold }
    p#y{ color: red; font-weight:bold }
    </style>
       
      </head>
    
    <body>
    
    <p>Click the button to demonstrate the prompt box.</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="x"></p>
    //<p id="y"></p>
    
    
    <script>
    function myFunction()
    {
    var x;
    
    var nr1=prompt("Please enter number","number1");
    var nr2=prompt("Please enter number","number2");
    
    
    
    
      
      x=parseInt(nr)+parseInt(nr2);
    y=nr1-nr2;
    
    document.getElementById("x").innerHTML=x + "<br>" + y;   //document.getElementById("y").innerHTML=y;
      
    }
    </script>
    
    </body>

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Just one thing to consider is that the Netscape browsers that required the use of prompt() do not support innerHTML.

    Those browsers that do support innerHTML provide far superior replacements for prompt() as well - which is why prompt() is never taught any more in proper programming classes (only in "history of JavaScript" classes).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Ok, let's start over

    Let's take a skeleton HTML document:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style></style>
      </head>
      
      <body>
        
        <script>
        </script>
      </body>
    </html>
    Notice the correct position of the <script> tags, just before the closing </body> tag.

    The first thing you are trying to do is have a button and make it do something when you click it.
    You shouldn't do this with inline JavaScript, rather by using the addEventListener method.

    Code:
    element.addEventListener(<event-name>, <callback>, <use-capture>);
    You should name your callback something useful. "myFunction" is not a good name, as it gives no indication as to what the function is doing.
    This gives us this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style></style>
      </head>
      
      <body>
        <button id="myButton">Try it</button>
    
        <script>
          function addTwoNumbers(){
            // Do your arithmetic here
          }
    
          var button = document.getElementById("myButton");
          button.addEventListener('click', addTwoNumbers, false);
        </script>
      </body>
    </html>
    So, it seems you want to have the user input two numbers and do something with them.
    As felgall rightly points out, the use of the prompt method is a little dated, but let's stick with it anyway.

    Code:
    var nr1 = prompt("Please enter number","first number"),
        nr2 = prompt("Please enter a second number","second number");
    Note you only need to use the var keyword once. You separate consecutive assignments with a comma.

    Now, let's calculate the result and give it a sensible name (not x).
    Also, use the Number() method to convert string values to an integer.

    Code:
    var result = Number(nr1) + Number(nr2);
    Okay, now we have that, let's add a container for our results to the page, then get a reference to it:

    Code:
    <div id="result"></div>
    
    var resultDiv = document.getElementById("result");
    Now we can do what we want with the calculation.
    Let's make number one blue, number two red, the result green and display everything on a seperate line:

    We can do this in a number of ways, for example:

    Code:
    var nr1Div = "<div class='blue'>First number: " + nr1 + "</div>",
        nr2Div = "<div class='red'>Second number: " + nr2 + "</div>",
        resDiv = "<div class='green'>Result: " + result + "</div>";
    
    resultDiv.innerHTML = nr1Div + nr2Div + resDiv;
    By using a block level element (divs), we can ensure that each is rendered on a new line.
    You could also have added <br> tags manually.

    Code:
    resultDiv.innerHTML = "This is some text" + "<br />" + "with a line break";
    Then we just have to add the CSS:

    Code:
    .blue{ color: blue;}
    .red{ color: red;}
    .green{ color: green;}
    And that's it

    Here's the code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Add two numbers</title>
        <style>
          .blue{ color: blue;}
          .red{ color: red;}
          .green{ color: green;}
        </style>
      </head>
      
      <body>
        <button id="myButton">Try it</button>
        <div id="result"></div>
    
        <script>
          function addTwoNumbers(){
            var nr1 = prompt("Please enter number","first number"),
                nr2 = prompt("Please enter a second number","second number"),
                result = Number(nr1) + Number(nr2),
                nr1Div = "<div class='blue'>First number: " + nr1 + "</div>",
                nr2Div = "<div class='red'>Second number: " + nr2 + "</div>",
                resDiv = "<div class='green'>Result: " + result + "</div>";
    
            resultDiv.innerHTML = nr1Div + nr2Div + resDiv;
          }
    
          var button = document.getElementById("myButton"),
              resultDiv = document.getElementById("result");
          button.addEventListener('click', addTwoNumbers, false);
        </script>
      </body>
    </html>

  13. #13
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positive numbers blue, negative red?

    Hello!
    Please, how to achieve that I get positive numbers blue and negative red in that program:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    <p Colorme if {(nr1>0&&nr2<0)  {color:red;}}
    
    else{
     {color:green;}}
    </style>
    </head>
    <body>
    <p>Click the button to demonstrate the prompt box.</p>
    <button onclick="myFunction()">Try it</button>
    <p>Nr #1: <b><span id="nr1"></span></b></p>
    <p>Nr #2: <b><span id="nr2"></span></b></p>
    
    <p>Add: <b><span class ="barva" id="sestevek"></span></b></p>
    <p>Diff: <b><span style="color:blue" id="razlika"></span></b></p>
    
    
    <script>
    
    function addition(nr1, nr2) {
    
    	var sum = nr1 + nr2;
    	return sum;
    }
    
    function differentiation(nr1, nr2) {
    
    	var diff = nr1 - nr2;
    	return diff;
    }
    
    function myFunction()
    {
    	var nr1=prompt("Please enter nr1","number1");
    	var nr2=prompt("Please enter nr2","number2");
    
    	nr1 = parseInt(nr1);
    	nr2 = parseInt(nr2);
    
      
    	document.getElementById("nr1").innerHTML= nr1;
    	document.getElementById("nr2").innerHTML= nr2;
    	
    	document.getElementById("sestevek").innerHTML = addition(nr1, nr2);
    	document.getElementById("razlika").innerHTML  = differentiation(nr1, nr2);
      
    }
    </script>
    </body>
    </html>

  14. #14
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    class (as for span) in js in HEAD---plese, do U have any examples how to define it?

    Hello!
    We have to imput 2 numbers, suing windows.prompt() . If the nr is positive, should ne blue, else red.

    We have to doit by DFINIING CLASSES IN HEAD!!!
    Please, does anyone has any SIMPLE example?
    many thanks!

  15. #15
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please, why is thi not working?
    It is not showing proper color:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
    <script>
    function displayResult()
    {
    if (nr1>0){document.getElementById("nr1").style.color="green";}
    else
    
    {document.getElementById("nr1").style.color="red";}
    
    
    }
    </script>
    
    
    
    
    </head>
    <body>
    <p>Click the button to demonstrate the prompt box.</p>
    <button onclick="myFunction()">Try it</button>
    <p>Nr #1: <b><span id="nr1"></span></b></p>
    <p>Nr #2: <b><span id="nr2"></span></b></p>
    
    <p>Seštevek: <span  id="sestevek"></span></p>
    <p>Razlika: <span  id="razlika"></span></p>
    
    
    <script>
    
    function addiotion(nr1, nr2) {
    
    	var sum = nr1 + nr2;
    	return sum;
    }
    
    function differentiation(nr1, nr2) {
    
    	var diff = nr1 - nr2;
    	return diff;
    }
    
    function myFunction()
    {
    	var nr1=prompt("Please enter nr1","number1");
    	var nr2=prompt("Please enter nr2","number2");
    
    	nr1 = parseInt(nr1);
    	nr2 = parseInt(nr2);
    
      
    	document.getElementById("nr1").innerHTML= nr1;
    	document.getElementById("nr2").innerHTML= nr2;
    	
    	document.getElementById("sestevek").innerHTML = addition(nr1, nr2);
    	document.getElementById("razlika").innerHTML  = differentiation(nr1, nr2);
      
    }
    </script>
    </body>
    </html>

  16. #16
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nr<0 onbe color, br>0 anothrr

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Add two numbers</title>
        <style>
          .blue{ color: blue;font-weight:bold}
          .red{ color: red;}
          .green{ color: green;}
        </style>
      </head>
      
      <body>
        <button id="myButton">Try it</button>
        <div id="result"></div>
    
        <script>
          function addTwoNumbers(){
            var nr1 = prompt("Please enter number","first number"),
                nr2 = prompt("Please enter a second number","second number"),
                result = Number(nr1) + Number(nr2),
                nr1Div = "<if nr1<0 {div class='blue'> " + nr1 + "</div>",}else
    { "<div class='red'>" + nr2 + "</div>",}
                nr2Div = "<div class='red'>" + nr2 + "</div>",
                resDiv = "<div class='green'>Result: " + result + "</div>";
    
            resultDiv.innerHTML = nr1Div + nr2Div + resDiv;
          }
    
          var button = document.getElementById("myButton"),
              resultDiv = document.getElementById("result");
          button.addEventListener('click', addTwoNumbers, false);
        </script>
      </body>
    </html>
    Pleasem what ids wrong here?
    Any pages with exampls maybe?
    many thanks

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    This line is wrong. Try to work out why:

    Code:
    nr1Div = "<if nr1<0 {div class='blue'> " + nr1 + "</div>",}else
    { "<div class='red'>" + nr2 + "</div>",}
    start off like so:

    Code:
    var nr1Div;
    if(...){
      nr1Div = whatever;
    } else {
      nr1Div = whatever;
    }

  18. #18
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please, how to check if nr1 and nr2 are NUMBERS AND NOT F.E. CHARACTERS&STRINGS_

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <button onclick="myFunction()">Try it</button>
    <p id="nr1">
    <p id="nr2">
    <script>
    function myFunction()
    {
    var nr1=prompt("Please enter nr1: ", "number1");
    var nr2=prompt("Please enter nr2: ", "number2");
    
    
    
      
    document.getElementById("nr1").innerHTML= nr1;
    document.getElementById("nr2").innerHTML= nr2;
    }
    
    </script>
    </body>
    </html>

  19. #19
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the difference ?

    Hello!
    Here are 2 cosde parts:

    Code:
    <script type="text/javascript">
    
    function sestevek(nr1, nr2) {
    if (isNan(nr1)!==false){document.write("<font color='red'><b>This is not a number!</b></font>");}
    var sum = nr1 + nr2;
    return sum;
    }
    Code:
    <script type="text/javascript">
    
    function sestevek(nr1, nr2) {
    if (nr1==0){document.write("<font color='red'><b>This is zero!!</b></font>");}
    var sum = nr1 + nr2;
    return sum;
    }
    It writes fine the second one: this is zero!
    But, in first example, I do not get nice red bold letters telling "This is not a number!

    Please, does soeone see where is the problem?
    Many thanks!

  20. #20
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello!
    Please, I tried this online at w3schol, and I do nto get these 2 numbers each in its line, bu ttogether.

    The same happens when I use string.
    What is wrong?
    Many thanks!

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Click the button to loop through a block of code five times.</p>
    <button onclick="myFunction()">Try it</button>
    
    
    <script>
    function myFunction()
    {
    var a=7;
    var b=6;
    var c=a+b;
    var d="Lep dan želim!!!"
    document.writeln(a);
    document.writeln(c);
    }
    </script>
    
    </body>
    </html>
    P.s. Please, cansomeone tell me if it is ok to keep in this theme?
    I am klicking "reply to thsi thread".
    Is that ok?
    All the best!

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mkjs View Post
    document.writeln(a);
    document.writeln(c);
    Those commands have been dead for over 10 years now - as a beginner you shouldn't even be seeing them referenced anywhere in the course or book you are learning from - unless you are learning history instead of programming in which case why are you worried about whether the code works or not in modern browsers as that code is for Netscape 4 and earlier.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

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