I need assistance with a JavaScript code. I have three links, each with a different ID. What I am trying to achieve is that when I click on one of these links, the script should grab the ID, delete all three links, and replace them with text in their place. For example:
<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>
When choice1 is clicked, all the links should be removed and a text saying "you clicked choice1" should appear, and the same should happen for choice2 but display "you clicked choice2".
I already have some JavaScript functions created - one to generate a div element with the text and another to remove the links. However, I am unsure how to extract the IDs and display the corresponding text.
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);
}
I've scoured the internet for a solution but haven't found an effective method yet. If anyone can provide guidance on accomplishing this task, I would greatly appreciate it.