0

So I'm literally just a few weeks into this programming bootcamp that I'm part of, forgive me if some basic concepts just fly past me.

Anyway, I'm trying to make an interactive fantasy map with points a user can click on to open up a modal with some info and a picture. The map itself is a static image and the area to click is just going to be a, hopefully, invisible button. Right now I'm just trying to get the modal to work and I'm having some trouble.

I got the button to where I want it and while it's not as invisible as I want it, it's getting there. The problem I'm having now is getting the function to work. I thought I had it but I don't know maybe I'm missing something. The thing I'm hoping to do is use the same format for each modal while changing out the text and images, so I'm using class instead of id for the over all modal and then adding an id for each individual modals text and image. This is what I have so far:

Html

<div id="map">          
      <div class="invisible-buttons">            
          <div id="FantasyTown1"><button class="button" onclick="toggleModal()"></button>
            <span class="close">&times;</span>
            <div class="modals" id="FantasyTown1_info">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
            </div>                
          </div>
          <!--<div id="FantasyTown2">
              <span class="close">&times;</span>
              <div class="modals" id="FantasyTown2_info">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
              </div>
          </div>-->
      </div>
      <!--Map-->
      <img src="Fantasy_map.jpg"></img>
 </div>

CSS

#FantasyTown1{
  position: absolute;
  z-index: 5;
  left:61%;
  bottom:47%;
  background-color: rgba(255, 0, 0, 0);
}

#FantasyTown1 button{
  background-color: rgba(255, 0, 0, 0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: context-menu;
}

#FantasyTown1_info{
  color:blanchedalmond;
  justify-content: flex-start; 
  width: 200px;
}

.modals {
  position: absolute;
  z-index: 1;
  left: 38%;
  top: 25%;
  width: 500px; 
  height: 500px; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
}

.close{
  color:blanchedalmond;
}

JavaScript

var modals = document.getElementsByClassName("modals")
var buttons = document.getElementsByClassName("button")
var span = document.getElementsByClassName("close")

function toggleModal(){
buttons.addEventListener("click",function()
{
    modals.style.display = "block";
});
span.addEventListener("click",function(){
  modals.style.display = "none";
});
}```

I'm probably missing something super obvious but it's better to get help now rather than agonize over it any longer. Any help is welcome, thanks!

RookWorks
  • 1
  • 3
  • Every time you call your `toggleModal()`, it doesn't do anything, but adds a new pair of event listeners to the elements. What you probably want is to just move the code out of `toggleModal` (you don't need that function at all, neither the `onclick="toggleModal()"`). That way, the code runs immediately, setting up the listeners that will handle the rest. – FZs Feb 27 '22 at 06:27
  • Tried deleting the things you suggested, it's just the box that would be the modal if the button actually worked. The console read this error: Uncaught TypeError: buttons.addEventListener is not a function. So I don't think that's the answer. – RookWorks Feb 28 '22 at 08:19
  • Oh, there's another thing I missed last time (`getElementsByClassName` returns a list of items, so you have to loop through them). See https://stackoverflow.com/q/10693845/8376184 – FZs Mar 01 '22 at 05:45

0 Answers0