使用javascript處理彈出窗口

我有一個基本頁面，其中有一個「添加鏈接」按鈕，點擊後您會看到一個彈出窗口。彈出窗口有一個表單域來輸入鏈接。一旦輸入鏈接，我想刷新基本頁面 - 基本頁面不應該再是「添加鏈接」，而是更改爲在彈出窗口中輸入的超鏈接。使用javascript處理彈出窗口

我是新來的Javascript和HTML。我到目前爲止已經設法在基本頁面上創建一個按鈕，並且點擊後會顯示一個帶有鏈接表單字段的彈出窗口。但是，我無法使用新鏈接刷新基本頁面。

下面是我的代碼：

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="myFunction()">Add Link</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    prompt("Please Enter the Link"); 
} 
</script> 

</body> 
</html>

來源

2013-07-10 user2521326

以下幾點每次按下按鈕時，都會顯示提示，一旦該提示關閉，腳本將爲demo div添加一個新的<a href=value>New Link</a>標籤。

<!DOCTYPE html> 
<html> 
    <body> 
     <button onclick="myFunction()">Add Link</button> 
     // This needs to be a 'div' so it can have elements inside it.    
     <div id="demo"></div> 
     <script> 
      var demo = document.getElementById('demo'); 
      function myFunction() 
      { 
       // Stores the value from the prompt() in the variable 'value' 
       var value = prompt("Please Enter the Link"); 
       var link = document.createElement('a'); // Create an <a> tag 
       link.setAttribute('href', value); // Set the link's URL to the value. 
       link.innerHTML = "New Link"; // Set the link's display text. 
       demo.appendChild(link); // Add the link to the demo div. 
      } 
     </script> 
    </body> 
</html>

希望這些意見解釋它是如何工作的，如果不是隻問這裏:)

來源

2013-07-10 19:22:38 Blam

嗨，謝謝你的迴應。你可以讓我知道如何刪除基本頁面上的「添加鏈接」選項，一旦新的鏈接已被添加？ – user2521326

試試這個：

<button onclick="myFunction()">Add Link</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    var url = prompt("Please Enter the Link"); 
    window.location = url; 
} 
</script>

http://jsfiddle.net/douglasloyo/rtghQ/ 認爲是可以接受的JS提琴唯一的價值將是http://jsfiddle.net/

乾杯

來源

2013-07-10 19:15:52

嗨道格拉斯，我不想去添加後添加的鏈接。我想鏈接被顯示在「添加鏈接」的地方作爲「新鏈接」 – user2521326

你需要一些方法來存儲在服務器上的鏈接;刷新頁面將導致一切都被重新執行，並且你不能真正動態地改變自己的html文件。像django這樣的postgresql數據庫很容易設置，但這超出了你的問題的範圍。

也就是說，如果你可以在刷新頁面時保持鏈接不生效，可以使用文本區域而不是提示。舉個例子，如果您有jQuery的：

<head> 
<script> 
$(function() { 
$("#addLink").click(function() { 
    var linkStr = document.getElementById("linkInput").value; 
    $("#linkArea").html("<a href=" + linkStr + ">Your link</a>"); 
}); 
}) 
</script> 
</head> 

<span id="linkArea"> 
    <input id="addLink" type="submit" value="Add Link: "> 
    <input id="linkInput" type="text" value="(enter link)"> 
</span>

這裏有一個的jsfiddle嘗試一下： http://jsfiddle.net/tRcUp/

哦，一般你應該把腳本頭標記。

來源

2013-07-10 19:27:32 Will

使用javascript處理彈出窗口

回答

相關問題