Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to apply CSS to javascript variable

    I've got an prompt box that asks the user their name.
    I then have a heading that says hello, and their name, and welcomes them to my site.

    I've managed to apply CSS to the entire string, but I want to use a different heading style for the name so it stands out. Using <h4> as it is now doesn't display right.

    Code:
    var name=prompt("Oh hello there! Have we met, what is your name?:","");
    try
    { 
    if(isNaN(name))
    {
    throw "isname";
    }
    else if((name))
    {
    throw "notname";
    }
    }
    catch(err)
    {
    if(err=="isname")
    {
    document.write("<h2>Hello " +<h4> name </h4>+ ", and welcome to my webpage. /h2>");
    }
    if(err=="notname")
    {
    document.write("Names dont have numbers!");
    }
    }//-->

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post
    Firstly, the line that renders "<h2>Hello <h4> name </h4>..." is not syntactically correct, it should be something like this:

    Code:
    document.write("<h2>Hello <h4> " + name + " </h4>, and welcome to my webpage.</h2>");
    Secondly, you shouldn't have a block element h4 nested inside h2, you can use an em tag instead of h4. It italicize the textual content by default. So you should change the line in your JavaScript code to this:

    Code:
    document.write("<h2>Hello <em> " + name + " </em>, and welcome to my webpage.</h2>");
    Lastly, if you want to change how the em tag look, you can do this by adding some rules to your style sheet, as follows:

    Code:
    h2 em
    {
        color: Blue; /* make the text blue, this is just an example */
    }
    The code above applies the style to every single em that sits under an h2, so you might want to change it a little to suit your needs.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You can't nest headings inside one an other. Use an inline tag around the name instead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    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
    •