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时，所有链接都必须删除并创建一个文本＆＃34;你点击了choice1＆＃34;，如果我在choice2中点击同样的事情，但是这次显示＆＃34;你点击了选择2＆＃34;

我有这个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的innerHTML格。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该使用此answer中的事件监听器，因为它们通常是更好的做法。但是，如果您仍然需要/需要使用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*事件都作为参数传递给事件发生的元素。

删除所有链接并根据所点击链接的ID来处理文本

2 个答案: