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

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

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

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

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

Где содержит сохраненное значение в формате intersects[0].object.title

Итак, если, например, я выбрал «Манхэттен»,

alert(intersects[0].object.title)

Я добьюсь правильного отображения строки "manhattan". Это работает отлично.

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

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

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

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

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


javascript function css onclick
person osteopathx    schedule 14.01.2019    source источник
comment
ОБНОВЛЕНИЕ: Это было решено с помощью альтернативного метода - оказалось, что возникла проблема с поиском значения intersects[0].object.title до того, как оно было определено.   -  person osteopathx    schedule 15.01.2019

Ответы (3)


arrow_upward
1
arrow_downward

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

Вместо того, чтобы настраивать 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>

person Chase Ingebritson    schedule 14.01.2019

arrow_upward
1
arrow_downward

Из вашего вопроса я не уверен, как части вашей головоломки связаны друг с другом, и было бы полезно, если бы вы могли уточнить, показав больше своего кода 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>

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

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

arrow_upward
0
arrow_downward

Дайте вам 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');
person OriEng    schedule 14.01.2019