我正在尝试使用用户通过JavaScript警报框输入的信息在HTML页面上创建链接

Question

到目前为止，基本上我所拥有的页面是具有两个弹出/警告框的页面。 第一个要求用户输入他们喜欢的网站的名称。 第二个要求用户将URL输入到他们喜欢的网站。 结果应该以用户输入的名称显示在主页上的超链接中，该名称指向用户单击时输入的URL。 这是我的代码：

<!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。 我是JavaScript的初学者，非常感谢您的协助。 谢谢。

我最终将其更改为：

<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>

Answer 1

你所拥有的几乎是正确的。

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>');

您缺少分号来指示行的末尾，并将站点名称添加到链接中。 同样， h1和h2元素也不属于script元素。

JSFiddle。

Answer 2

您需要为超链接设置文本，否则超链接将不可见。

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

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

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

附带说明，您应该避免使用提示或警报。 多个此类对话框将使用户烦恼，浏览器将发出警告，UI自动化测试变得困难。 您可以使用jquery ui对话框或div弹出窗口获取用户输入，并使用jquery创建超链接。

Answer 3

您缺少分号，并且网站和网址变量相同。 设置超链接的文本，否则超链接将不可见

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>

Answer 4

远离document.write ！！！

为什么document.write被认为是“不良做法”？

现场演示

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>

最后，我会认真考虑使用一个框架来处理您的DOM操作。 jQuery是一个很好的学习对象。

Answer 5

是的document.write会覆盖所有现有的文档节点..并且您应该尝试在运行脚本之前等待页面加载。

<!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>

Answer 6

您的链接中没有任何内容。 尝试这样的事情：

看JS：

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

查看实际效果：

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

我正在尝试使用用户通过JavaScript警报框输入的信息在HTML页面上创建链接

问题描述

6 个解决方案

解决方案1
0 2013-09-04 03:03:26

解决方案2
0 2013-09-04 03:03:40

解决方案3
0 2013-09-04 03:03:41

解决方案4
0 2013-09-04 03:06:24

远离document.write ！！！

解决方案5
0 2013-09-04 03:07:01

解决方案6
0 2013-09-04 03:10:19

我正在尝试使用用户通过JavaScript警报框输入的信息在HTML页面上创建链接

问题描述

6 个解决方案

解决方案1 0 2013-09-04 03:03:26

解决方案2 0 2013-09-04 03:03:40

解决方案3 0 2013-09-04 03:03:41

解决方案4 0 2013-09-04 03:06:24

远离document.write ！！！

解决方案5 0 2013-09-04 03:07:01

解决方案6 0 2013-09-04 03:10:19

解决方案1
0 2013-09-04 03:03:26

解决方案2
0 2013-09-04 03:03:40

解决方案3
0 2013-09-04 03:03:41

解决方案4
0 2013-09-04 03:06:24

解决方案5
0 2013-09-04 03:07:01

解决方案6
0 2013-09-04 03:10:19