Calling a value + style.display function?

Question

I'm struggling to get this working because I don't know the right formatting.

What I am attempting is to get a CSS modal to display depending on what a user selects as a value in a Javascript applet.

The idea is to return .style.display = "block";

function onClick(event){
    <something>.style.display = "block"; 
}

Where contains a value that has being saved in the format of intersects[0].object.title

So if for example I have selected "manhattan"

alert(intersects[0].object.title)

I'll get the string "manhattan" displaying correctly. That works perfectly.

But I can't get manhattan.style.display = "block"; returned and WORKING inside the function? I tried :

function onClick(event){
    intersects[0].object.title.style.display = "block"; 
}

Also tried

function onClick(event){
    (intersects[0].object.title).style.display = "block"; 
}

Any help would be greatly appreciated

Answer 1

Give to you div some id and then just change that:

<div id="test"></div>

document.getElementById("test").style["display"] = "block";
or
document.getElementById("test").style.display = "block";
or 
document.getElementById("test").style.setProperty('display', 'block');
or
document.getElementById("test").setAttribute('display', 'block');

Answer 2

This may not be directly what you're looking for, but it may help anyways. To make it work in your case, just change the button press to be a check for the selected value.

Rather than adjusting the CSS directly, this route modifies the element's classList to remove or add a .hidden class that contains the correct CSS.

// Loop through all modal buttons
document.querySelectorAll('.modal-button').forEach(function(element) {
  // Add a click event listener to all modal buttons 
  element.addEventListener('click', function() {
    // Toggle the target modal on click
    toggleModal(element.dataset.target);
  });
});

// Create the function to toggle the modals
function toggleModal(target) {
  // Find the target
  let targetElement = document.querySelector(target);
  
  // Check if the target is hidden
  if (targetElement.classList.contains('hidden')) {
    // If it is, show it
    targetElement.classList.remove('hidden');
  } else {
    // If it isn't, hide it
    targetElement.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>

Answer 3

I'm not certain from your question how the pieces of your puzzle are related to one another, and it would be helpful if you could clarify by showing more of your HTML and Javascript code, but I'll toss a couple of ideas at you in the meantime. Apologies if I'm telling you stuff you already know.

The only sort of object you would usually be able to set "style.display" on is an HTML element. To tell Javascript which HTML element you want to modify, you usually use a CSS selector like "document.getElementById('myDiv')"

It sounds like "manhattan" might be a piece of information you could use to uniquely identify the HTML element you intend to show. If so, there are four simple parts to showing the correct element:

• associate the element with that particular string (eg via an id)
• get the string at runtime (the same way as you did for the alert)
• select the element based on the matching string
• display the selected element

All together, it might look like this:

<div id="manhattan"></div>
<script>
var identifier = intersects[0].object.title;
alert(identifier) //I'm assuming this alerts "manhattan"
var elementToShow = document.getElementById(identifier);
elementToShow.style.display = "block";
</script>

Is this on the right track? If not, just provide more detail, and I'll see what else I can suggest.