锚标记href函数

Question

I am trying to create a function that finds the id of an element that an anchor tag directs to, and attach a class to that element. I need this to be vanilla js not jquery.

For Example:

<div id="firstDiv"></div>

<div> Destination </div>
<div> Destination #2 </div>

The idea would be that once you click on the anchor tag that it would take you to the div and attach a class to that div to initiate a function.

The script that I've written runs for loops that add the values of the href attribute and the id attribute from javascript objects. See Below:

var rooms = [
{
id: 1,
name: Example,
},
{
id:2,
name: Example #2,
}
]

         for ( x in rooms ) {
           var i = document.getElementById("firstDiv");
           var a = document.createElement("a");
           i.appendChild(a);
           a.href = "#" + rooms[x].id;
           a.innerHTML += rooms[x].name + "<br>";
           a.classList.add("show");
          
        }

        var rect = document.getElementsByTagName("rect");
        for ( i = 0; i < rect.length; i++ ) {
           rect[i].setAttribute("id", rooms[i].id);
        } 

Output:

<div id="firstDiv">
<a href="#1"> Example </a>
<a href="#2"> Example #2 </a>
</div>

<div id="1"> Destination </div>
<div id="2"> Destination #2 </div>

The function below is an example of what I want the function to do for each corresponding div when an a tag is clicked.

function attach() {
var div = document.getElementById(rooms[i].id);
div.classList.toggle("active");
}

Any advice on how to properly write this function for my particular needs. Would a for loop be best for this or an if/else statement. I've tried both but neither has worked.

Please let me know if I need to clarify more.

Answer 1

It seems like this is what you are asking about. See comments inline.

 document.addEventListener("click", function(event){ // First, check to see if it was an anchor that was clicked // in the document if(event.target.nodeName === "A"){ // If so, add a class to the target // Get the href attribute and strip off the "#", then find that element and toggle the class document.getElementById(event.target.getAttribute("href").replace("#","")).classList.toggle("highlight"); } });

 .highlight { background-color:yellow; }

 <div id="firstDiv"> <a href="#one"> Example </a> <a href="#two"> Example #2 </a> </div> <div id="one"> Destination </div> <div id="two"> Destination #2 </div>

Answer 2

Try this:

let anchors = document.querySelectorAll("#firstDiv a");

for (let i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener("click", () => {
        var div = document.getElementById(rooms[i].id);
        div.classList.toggle("active");

}

Answer 3

You're almost there you just need to add an onclick property for the anchor tag now you can or cannot use the third attach function.I am including both implementations for your reference.

for ( x in rooms ) {
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`document.getElementById(${rooms[x].id}).classList.toggle("active")`;
    }

If you want to have a dedicated function your loop becomes

for ( x in rooms ) {
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`attach(${rooms[x].id})`;
    }

Your attach function then becomes:

function attach(id) {
 var div = document.getElementById(id);
 div.classList.toggle("active");
  }

Do let me know if you have any issues.

Answer 4

CSS Only

This is a bit off-topic but you can use the :target selector to set the style of the corresponding id without JS .

 /* element with an id matching the URL fragment */:target { background: gold; } /* you can combine target with other selectors */ #c:target { background: orange } /* just a bit of styling */ a,div { padding: .5rem; display: block; width: 20%; float:left; }

 <a href="#a">Link to A</a> <a href="#b">Link to B</a> <a href="#c">Link to C</a> <a href="#d">Link to D</a> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> <div id="d">D</div>