需要使用JavaScript打印文本框的内容,但它会不断复制每个条目

时间:2017-03-01 19:10:12

标签: javascript html css

我需要访问表单中提交的网站并将其打印到页面上。它工作正常,但每次都会打印最后一个条目和新条目。对不起,如果它很乱,我还在学习!

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="favourites.js"></script>
  <link href="part3.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Metamorphous"      rel="stylesheet">
</head>

<body>
<div id ="back">
<a class="homebutton" href="index.html">Home</a>
</div>
<div id="main">
<h1 style ="text-align:center">Favourite Website Organizer</h2>
<hr>
<br>
<br>
<h2>Please Enter Your Favourite Website, then click enter:</h2>

<br>
<form id="website" style = "text-align:center">
<input type="text" maxlength="25" id="webSite" placeholder=www.example.com      style="text-align:center">

<button class="button" value="Enter" onclick="storeData();return false">     <span>Enter</span></button>
</form>
<h3>This is a list of your favourite sites</h3>
<span id = "result"></span>
</div>

</body>
</html>

这里是javascript

  var webAddress=[];



 function storeData() {
  var address;

  var website;
  var thisAddress;
  var i=0;
  var outmessage="";
  website=document.getElementById("webSite").value;

  webAddress.push(website);
  for(i=0; i< webAddress.length;i++)
     {
       outmessage+=outmessage+ "<a target=\"_blank\"  href=http://"+webAddress[i]+">"+webAddress[i]+"</a>"+"<br>";
    }
document.getElementById("result").innerHTML=outmessage;

 }

1 个答案:

答案 0 :(得分:1)

更改此行:

outmessage += outmessage + "<a target=\"_blank\" ..."

......对此:

outmessage += "<a target=\"_blank\" ..."

鉴于两个变量xyx += y已经等同于x = x + y。无需再次添加x

var webAddress = [];

function storeData() {
  var address;
  var thisAddress;
  var i = 0;
  var outmessage = "";
  var website = document.getElementById("webSite").value;

  webAddress.push(website);
  for (i = 0; i < webAddress.length; i++) {
    outmessage += "<a target=\"_blank\"  href=http://" + webAddress[i] + ">" + webAddress[i] + "</a><br>";
  }

  document.getElementById("result").innerHTML = outmessage;

}
<head>
  <title>Index</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="favourites.js"></script>
  <link href="part3.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet">

  <body>
    <div id="back">
      <a class="homebutton" href="index.html">Home</a>
    </div>
    <div id="main">
      <h1 style="text-align:center">Favourite Website Organizer</h1>
      <hr>
      <br>
      <br>
      <h2>Please Enter Your Favourite Website, then click enter:</h2>

      <br>
      <form id="website" style="text-align:center">
        <input type="text" maxlength="25" id="webSite" placeholder=www.example.com style="text-align:center">

        <button class="button" value="Enter" onclick="storeData();return false">     <span>Enter</span></button>
      </form>
      <h3>This is a list of your favourite sites</h3>
      <span id="result"></span>
    </div>

  </body>