I am trying to create a link on an HTML page using information that a user inputs via JavaScript alert box

Question

Basically what I have so far is a page that has two pop-up/alert boxes. The first asks the user to input the name of their favorite website. The second asks the user to input the URL to their favorite website. The outcome is supposed to display in a hyperlink on the homepage as the name the user entered that directs to the URL they entered when clicked on. Here is what my code looks like:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Untitled</title>
    </head>
    <body>
        <script type="text/javascript">
            var favoriteSite;
            favoriteSite = prompt ("What is your favorite web site?")
            favoriteSite = prompt ("What is the URL of that site?") 
            document.write('<a href="' + favoriteSite + '"></a>')
        </script>                       
        <h1>Link to favorite site.</h1>
        <h2>This is my favorite web site</h2>  
    </body>
</html>

PS. I am a very very beginner to JavaScript, any assistance would be appreciated. Thanks.

This is what I ended up changing to:

<html>
    <head>
        <title>Untitled</title>
    </head>
    <body>
        <script type="text/javascript">
            var favoriteSite;
            var favoriteSiteName;
            favoriteSiteName = prompt ("What is your favorite web site?");
            favoriteSite = prompt ("What is the URL of that site?"); 
            document.write("<h1>Link to favorite website.</h1>");
            document.write("<h2>This is my favorite web site" +" " +     favoriteSiteName.link("https://" + favoriteSite + "") + "</p>");
        </script>                       
    </body>
</html>

score 0 · Answer 1 · answered Sep 04 '13 at 03:03

What you have is almost correct.

var favoriteSiteName = '',
    favoriteSiteURL = '';

favoriteSiteName = prompt('What is your favorite web site?');
favoriteSiteURL = prompt('What is the URL of that site?');
document.write('<a href="' + favoriteSiteURL + '">' + favoriteSiteName + '</a>');

You were missing the semi-colons to indicate the end of the lines and adding the site name to the link. Also, the h1 and h2 elements don't belong inside the script element.

JSFiddle.

gp. · Answer 2 · 2013-09-04T03:09:16.623

you need to set the text for hyperlink otherwise the hyperlink will not be visible.

favoriteSiteName = prompt ("What is your favorite web site?")

favoriteSite = prompt ("What is the URL of that site?") 

document.write('<a href="' + favoriteSite + '">'+favoriteSiteName+'</a>')

On a side note, you should avoid using prompt or alert. multiple such dialogs will annoy user, browser will give warning, UI automation testing becomes difficult. You can use jquery ui dialog or a div popup to take user inputs and use jquery to create the hyperlinks.

score 0 · Answer 3 · answered Sep 04 '13 at 03:03

0

you are missing semi colons and also site and url variables are being same. set the text for hyperlink otherwise the hyperlink will not be visible

var favoriteSite;
var favoriteUrl ;

 favoriteSite = prompt ("What is your favorite web site?");

 favoriteUrl = prompt ("What is the URL of that site?"); 

document.write('<a href="' + favoriteSite + '">Site</a>');
document.write('<a href="' + favoriteUrl + '">Url</a>');

</script>

answered Sep 04 '13 at 03:03

Roo

618
1
8
17

Thank you. I ended up using something similar: Untitled It seems to be working, not sure if it's "proper" though. – user2745089 Sep 04 '13 at 05:57

score 0 · Answer 4 · edited May 23 '17 at 12:22

STAY AWAY FROM document.write!!!

Why is document.write considered a "bad practice"?

Live Demo

JS

//Get the text you want to display
var text = document.createTextNode(prompt ("What is your favorite web site?")); 

//Create an attribute to for the href
var href = document.createAttribute("href");
href.value = prompt ("What is the URL of that site?") 

//Create a link
var link = document.createElement('a');

//Add the attribute to the link
link.setAttributeNode(href);

//Add the text to the link
link.appendChild(text); 

//Add the link to the page
document.getElementById('link').appendChild(link);

HTML

<h1>Link to favorite site.</h1>

<h2>This is my favorite web site: <span id='link'></span></h2>

Lastly, I'd seriously consider using a framework for handling your DOM manipulations. A great one to learn is jQuery.

score 0 · Answer 5 · answered Sep 04 '13 at 03:07

yea document.write writes over all existing document nodes.. and you should try to wait for the page to load before running the scripts.. try this

<!doctype html>

<html>
  <head>
    <script type='text/javascript'>
      window.addEventListener("load",function(){
        var siteName = prompt("what is you fave site name?");
        var siteURL = prompt("what is its URL?");
        var a = document.body.appendChild(document.createElement("a"));
        a.href = siteURL;
        a.innerHTML = siteName;
      });
    </script>
  </head>

  <body>

  </body>
</html>

and if you type 'www.google.com' it may try to go to 'yourdomain/www.google.com', so enter 'http://www.google.com', you can have JS check for this but its slightly more complex — dano, Sep 04 '13 at 03:09

score 0 · Answer 6 · answered Sep 04 '13 at 03:10

0

you do not have any content in your link. Try something like this:

to see JS:

http://jsbin.com/enOWeCI/1/edit

to see in action:

http://jsbin.com/enOWeCI/1/

answered Sep 04 '13 at 03:10

Alex

3,697
5
33
57

I am trying to create a link on an HTML page using information that a user inputs via JavaScript alert box

6 Answers6

STAY AWAY FROM document.write!!!