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
3 Réponses :
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');
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'); } }
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:
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.
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
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.