刪除所有鏈接，並根據所單擊鏈接的ID鍵入文本

Question

我需要一些有關JavaScript代碼的幫助。 我有三個鏈接，每個鏈接都有一個不同的ID，我想要做的是，當我單擊其中一個鏈接時，腳本會獲取ID，然后刪除所有三個鏈接，並在其中放置一個文本，例：

<div id="main">     
    <div>
    <div id="links">
         <a id="choice1" href="#footer" onclick="createDiv();removeLink();">choice1</a>
         <a id="choice2" href="#footer" onclick="">choice2</a>
         <a id="choice3" href="#footer" onclick="">choice3</a>
   </div>
   </div>
</div>

當我單擊choice1時，必須刪除所有鏈接並創建一個文本“您在choice2中單擊”，如果我在choice2中單擊，也會發生相同的情況，但是這次顯示“您在choice2中單擊”。

我有這個javascript，具有創建帶有文本的div的功能和刪除鏈接的功能。 但是我不知道該如何選擇ID並放置對應的文本。

function createDiv()
{
    var element = document.createElement("div");
    var main = document.getElementById("main");
    main.appendChild(element);
    var text = document.createTextNode("This is the new text");
    element.appendChild(text);  
}
function removeLink()
{
var link = document.getElementById("links");    
    link.parentNode.removeChild(link);
}

我在互聯網上進行了大量搜索，但沒有找到有效的方法。 如果有人可以提供提示，我將非常感激。

Answer 1

您可以在父容器（即#links）上設置一個點擊偵聽器，並檢查是否單擊了其中一個鏈接，如果已單擊，則獲取InnerHTML並替換#links div的innerHTML。

 document.getElementById('links').addEventListener('click',function(event){ event.preventDefault(); var target = event.target; if (target.nodeName === 'A'){ this.innerHTML = 'You clicked on ' + target.innerHTML; } }); 

 <div id="links"> <a id="id-1" href="google.com">Option 1</a> <a id="id-2" href="google.com">Option 2</a> <a id="id-3" href="google.com">Option 3</a> </div> 

Answer 2

您應該使用此答案中的事件偵聽器，因為它們通常是更好的做法。 但是，如果您仍然希望/需要使用onclick ，則可以使用this並將其傳遞給createDiv 。 因此您的代碼將如下所示：

 function createDiv(e) { var element = document.createElement("div"); var main = document.getElementById("main"); main.appendChild(element); var text = document.createTextNode("you clicked on " + e.innerText); element.appendChild(text); } function removeLink() { var link = document.getElementById("links"); link.parentNode.removeChild(link); } 

 <div id="main"> <div> <div id="links"> <a id="choice1" href="#footer" onclick="createDiv(this);removeLink();">choice1</a> <a id="choice2" href="#footer" onclick="createDiv(this);removeLink();">choice2</a> <a id="choice3" href="#footer" onclick="createDiv(this);removeLink();">choice3</a> </div> </div> </div> 

所有on*事件都作為發生事件的元素作為參數傳遞。