2
votes

Vous appelez une fonction value + style.display?

J'ai du mal à faire fonctionner cela parce que je ne connais pas le bon formatage.

Ce que j'essaye, c'est d'afficher un modal CSS en fonction de ce qu'un utilisateur sélectionne comme valeur dans une applet Javascript.

L'idée est de renvoyer .style.display = "block";

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

Où contient une valeur qui a été sauvegardée au format d'intersection [0] .object.title

Donc si par exemple j'ai sélectionné " manhattan "

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

Je vais afficher la chaîne" manhattan "correctement. Cela fonctionne parfaitement.

Mais je ne peux pas obtenir manhattan.style.display = "block"; retourné et TRAVAILLANT à l'intérieur de la fonction? J'ai essayé:

alert(intersects[0].object.title)

Également essayé

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

Toute aide serait grandement appréciée


1 commentaires

MISE À JOUR: Cela a été résolu par une méthode alternative - il s'est avéré qu'il y avait un problème avec la recherche de la valeur d'intersection [0] .object.title avant qu'elle ne soit définie.


3 Réponses :


0
votes

Donnez-vous un identifiant et changez-le simplement:

<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');


0 commentaires

1
votes

Ce n'est peut-être pas directement ce que vous recherchez, mais cela peut quand même vous aider. Pour que cela fonctionne dans votre cas, changez simplement le bouton pour vérifier la valeur sélectionnée.

Plutôt que d'ajuster directement le CSS, cette route modifie la classList de l'élément pour supprimer ou .hidden classe qui contient le bon CSS.

<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>
.hidden {
  display: none;
}
// 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');
  }
}


0 commentaires

1
votes

Je ne suis pas certain, d'après votre question, de savoir comment les pièces de votre puzzle sont liées les unes aux autres, et il serait utile que vous puissiez clarifier en montrant plus de votre code HTML et Javascript, mais je vais en lancer quelques idées à vous en attendant. Toutes mes excuses si je vous dis des choses que vous connaissez déjà.

Le seul type d'objet sur lequel vous seriez normalement capable de définir "style.display" est un élément HTML. Pour indiquer à Javascript quel élément HTML vous souhaitez modifier, vous utilisez généralement un sélecteur CSS comme "document.getElementById ('myDiv')"

Il semble que "manhattan" soit une information que vous pourriez utiliser pour identifier de manière unique l'élément HTML que vous souhaitez afficher. Si tel est le cas, il y a quatre parties simples pour montrer l'élément correct:

  • associer l'élément à cette chaîne particulière (par exemple via un identifiant)
  • récupérez la chaîne lors de l'exécution (de la même manière que vous l'avez fait pour l'alerte)
  • sélectionnez l'élément en fonction de la chaîne correspondante
  • afficher l'élément sélectionné

Dans l'ensemble, cela pourrait ressembler à ceci:

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

Est-ce sur la bonne voie? Sinon, fournissez plus de détails et je verrai ce que je peux suggérer d'autre.


1 commentaires

Salut chat. Oui, nous avons le même genre de logique. J'ai réalisé qu'il y avait une erreur de mon côté lorsque votre 4ème ligne (alerte (identifiant)) n'affichait pas Manhattan. J'ai ouvert la console Chrome et j'ai vu cette erreur: Uncaught TypeError: Impossible de lire la propriété 'length' de undefined dans HTMLDocument.onClick J'essaie de résoudre ce problème maintenant car je pense que votre code est parfait, mais il y a quelque chose qui ne va pas avec les intersections [ 0] .object.title En cours de lecture de stackoverflow. com / questions / 12194435 /… pour des indices