Вызов функции value + style.display?

Я изо всех сил пытаюсь заставить это работать, потому что я не знаю правильного форматирования.

Я пытаюсь получить модальное окно CSS для отображения в зависимости от того, что пользователь выбирает в качестве значения в апплете Javascript.

Идея состоит в том, чтобы вернуть .style.display = "block";

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

Где содержит значение, которое было сохранено в формате перекрестков [0] .object.title

Так что если, например, я выбрал "манхэттен"

alert(intersects[0].object.title)

Я добьюсь того, чтобы строка "манхэттен" отображалась правильно. Это прекрасно работает.

Но я не могу получить manhattan.style.display = "block"; вернулся и РАБОТАЕТ внутри функции? Я пытался :

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

Также пробовал

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

Любая помощь будет принята с благодарностью

ОБНОВЛЕНИЕ: это было решено с помощью альтернативного метода - оказалось, что возникла проблема с поиском значения crosscts [0] .object.title до того, как оно было определено.

osteopathx 15.01.2019 05:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
73
3

Ответы 3

Дайте вам div какой-нибудь идентификатор, а затем просто измените его:

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

Возможно, это не совсем то, что вы ищете, но все равно может помочь. Чтобы он работал в вашем случае, просто измените нажатие кнопки на проверку выбранного значения.

Вместо того, чтобы напрямую настраивать CSS, этот маршрут изменяет classList элемента, чтобы удалить или добавить класс .hidden, содержащий правильный 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>

Я не уверен в вашем вопросе, как части вашей головоломки связаны друг с другом, и было бы полезно, если бы вы могли уточнить, показав больше вашего кода HTML и Javascript, но я подброшу вам пару идей. в это время. Прошу прощения, если я рассказываю вам то, что вы уже знаете.

Единственный тип объекта, для которого обычно можно установить style.display, - это элемент HTML. Чтобы указать Javascript, какой элемент HTML вы хотите изменить, вы обычно используете селектор CSS, например "document.getElementById ('myDiv')"

Похоже, что «манхэттен» может быть частью информации, которую вы могли бы использовать для уникальной идентификации HTML-элемента, который вы собираетесь показать. Если да, то есть четыре простых части, чтобы показать правильный элемент:

  • связать элемент с этой конкретной строкой (например, через идентификатор)
  • получить строку во время выполнения (так же, как и для предупреждения)
  • выберите элемент на основе соответствующей строки
  • отобразить выбранный элемент

Все вместе это может выглядеть так:

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

Это на правильном пути? Если нет, просто расскажите подробнее, и я посмотрю, что еще я могу предложить.

Привет, Кот. Да, у нас такая же логика. Я понял, что на моем конце произошла ошибка, когда ваша 4-я строка (предупреждение (идентификатор)) не отображала манхэттен. Я открыл консоль Chrome и увидел эту ошибку: Uncaught TypeError: Невозможно прочитать свойство length of undefined в HTMLDocument.onClick Я пытаюсь разобраться с этим сейчас, так как думаю, что ваш код находится на правильном месте, но что-то не так с пересечениями [ 0] .object.title В настоящее время читает stackoverflow.com/questions/12194435/… для подсказок

osteopathx 14.01.2019 18:05

Другие вопросы по теме