JS: Displaying html w/ variables via document.write.

Question

Hi all,

I just started learning JS the other day and am (of course) having some difficulty. I usually grasp onto things quickly but I can't for the life of my find a solution to this. I'd like to understand why this is happening.

My objective is to use 3 prompt boxes, all which come one after another, to print out a piece of html code, which will be a simple URL. I'll add more to this but I'd like to get past this first.

At the moment, I'm getting the prompts, but after I enter data into the third box and submit it, nothing happens.

What am I doing wrong here? If it's an error with my document.write code, what are some things I should be looking out for?

Thanks!..

function show_prompt()
{
 var site_type = prompt("What kind of link is this?");
 var site_url = prompt("What is the URL?");
 var site_title = prompt("Give the link a title");
 if (site_type = website) {
  document.write("<a style=\"color: #777777\" href=\"http:\/\/site_url\" title=\"site_title\">site_title<\/a>");
 }
 else 
  if (site_type = video) {
   document.write("<a style=\"color:#98B2C3\" href=\"http:\/\/site_url\" title=\"site_title\">site_title<\/a>");
  }
  else 
   if (site_type = image) {
    document.write("<a style=\"color:#8D5359\" href=\"http:\/\/site_url\" title=\"site_title\">site_title<\/a>");
   }
   else 
    (site_type = article); {
           document.write("<a style=\"color:#768D53\" href=\"http:\/\/site_url\" title=\"site_title\">site_title<\/a>");
             }
}

Answer 1

Well, before we even start trying to work through how the if statements are going to work, we need to fix the fact that you are assigning not comparing in your if() statements.

Rather than have a single = sign in your if statements you need to have 2 equal signs. Like this:

if (site_type == website)

A single = sign is used to assign variables, so in your case you're actually assigning the value of website into the variable of site_type - not comparing the two seperate values.

Try this:

function show_prompt()
{
        var site_type = prompt("What kind of link is this?");
        var site_url = prompt("What is the URL?");
        var site_title = prompt("Give the link a title");
        if (site_type == "website") {
            document.write("<a style=\"color: #777777\" href=\"http:\/\/"+site_url+"\" title=\"site_title\">"+site_title+"<\/a>");
        }
        if (site_type == "video") {
            document.write("<a style=\"color:#98B2C3\" href=\"http:\/\/"+site_url+"\" title=\"site_title\">"+site_title+"<\/a>");
        }
        if (site_type == "image") {
            document.write("<a style=\"color:#8D5359\" href=\"http:\/\/"+site_url+"\" title=\"site_title\">"+site_title+"<\/a>");
        }
        if(site_type == "article") {
            document.write("<a style=\"color:#768D53\" href=\"http:\/\/"+site_url+"\" title=\"site_title\">"+site_title+"<\/a>");
        }
}

I've made a few changes to your code in the above chunk, not just removing the else statements. I've also made the if() comparisons check against strings rather than against empty variables as you had before and I've changed the document.write functions to use the added prompt strings in them. If we can get that to work, we can start thinking about where we really want to put the else statements at a later date :)

Answer 2

replace "if (site_type = website) {" for "if (site_type == website) {" and others.

Answer 3

In addition to the assignment vs comparison problem from Steerpike and Andres, you are going to run into problems because you are comparing your variable site_type to another variable: website or video or image or article. These are uninitialized variables, so the conditional will actually be checking if site_type == null

What was happening in your original code is the following:

// The value on the right side of the = is assigned to site_type.
// All of these are uninitialized, so will evaluate to null
// Since null is falsy, each conditional fails
if (site_type = website){ 
...
} else if (site_type = video){
...
} else if (site_type = image){
...
} else if (site_type = article){
...
}

Answer 4

In addition to using assignment instead of comparison operator, you should probably also quote your strings.

eg:

if (site_type == 'video') {
                        document.write("<a style=\"color:#98B2C3\" href=\"http:\/\/site_url\" title=\"site_title\">site_title<\/a>");
                }

Unless those are actually meant to be variables, video, will produce an error if it is undefined, thus your JavaScript stops.

If you're not using Firefox, download it and install Firebug. http://getfirebug.com/

It will let you know what the JavaScript errors are, and offer a lot of other tools.