Показать/скрыть элемент Div с помощью кнопки javascript нажмите

У меня есть сайт с использованием Google Maps Api, который добавляет и сохраняет маркеры. При нажатии на сохраненный маркер отображается информационное окно, в котором есть кнопка. Когда эта кнопка нажата, я хочу, чтобы она отображала скрытый элемент DIV, который содержит таблицу сохраненных сведений о маркере.Показать/скрыть элемент Div с помощью кнопки javascript нажмите

JS, который содержит InfoWindow является:

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' + 
     '<span><h5>Date: </h5>' + 
     '<p class="event-date">' + point.edate + '</p></span>' + 
     '<p class="event-description">'+ point.description +'</p>' + 
     '<button id="remove-event" name="remove-event" onclick="showDetails();" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>'+ 
     '</div>'); 

    // Display Event details on marker click 
    google.maps.event.addListener(event_markers[i], "click", function() { 
     infowindow.setContent(eventContent[0]); 
     infowindow.open(map, event_markers[i]); 
     map.setCenter(marker.getPosition()); 
     map.setZoom(10); 
    });

HTML-ДИВ Я хочу, чтобы отобразить это:

<div class="event-details" id="event-details" style="display: none "> 
     <h3>Event Details</h3> 
     <table class="table"> 
      <tr> 
       <th>Event Name: </th> 
       <td> Bill Gates</td> 
      </tr> 
      <tr> 
       <th>Event Date: </th> 
       <td> Bill Gates</td> 
      </tr> 
     </table> 
     <button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button> 
    </div>

Я попытался это, среди других подобных идей, но не повезло .:

function showDetails() 
{ 
    if (document.getElementById("event-details").style.display == "none") { 
     document.getElementById("event-details").style.display=""; 

    } else { 
     document.getElementById("event-details").style.display="none"; 
}

источник

2015-03-27 Stephen

вы используете getElementById, когда ваш DIV имеет класс «событийно детали ", а не идентификатор. Измените класс атрибута на id –

И, пожалуйста, кешируйте элемент 'DOM', поскольку« DOM »сканирование дорогое, может быть, в этом случае, поскольку оно не массивное, но в целом! – lshettyl

Извините, я хотел изменить это. Я попробовал его id = «event-details», и он не работал – Stephen

Ваши элементы не имеют id из "event-details", но class. Попробуйте использовать вместо getElementsByClassName:

document.getElementsByClassName("event-details")[0].style.display = "none"// returns multiple elements so you should select the first (0th) item.

Может быть, лучшим решением было бы добавить «идентификатор» в вашем HTML элемента:

<div id="event-details" class="event-details" style="display: none ">

Таким образом, ваш метод getElementById должен поймать элементы, которые вы хотите.

источник

2015-03-27 14:01:32

Почему вы предлагаете использовать getElementsByClassName в 2015 году, когда вы можете использовать querySelector и querySelectorAll? –

Я уже пробовал добавить id = "event-details", но он не работал – Stephen

Да, я полностью согласен с вами @NikolayTalanov. Я мог бы объяснить, как работает 'querySelector', или я могу дать ему прямой ответ. Совершенно очевидно, что делает 'getElementsByClassName'. –

Вы пытались предоставить идентификатор div?

Возможно, почему «getElementById» не работает.

тогда:.

document.getElementById ("eventDetails") style.display = "нет";

источник

2015-03-27 14:04:34

Да, я уже пробовал это, просто забыл включить id = "event-details" в вопрос ... исправлены теперь, хотя – Stephen

Вы отлаживали его? вы можете получить элемент, получение элемента по ID не возвращает элемент, как можно было бы ожидать. поэтому «.style.display» нелегко доступен –

FIXED. Моя ShowDetails функция была обнаружена синтаксическая ошибка, пропускал закрытие}

function showDetails() 
{ 
    if (document.getElementById("event-details").style.display == "none") { 
     document.getElementById("event-details").style.display="block"; 

    } 
    else 
    { 
     document.getElementById("event-details").style.display="none"; 
    } 
}

источник

2015-03-27 14:11:23 Stephen

aha! Очень приятно, что ты понял! – lshettyl

Пожалуйста, используйте querySelector, как показано ниже. Поскольку у вас уже есть идентификатор для элемента, который вы хотите нажать на, как показано ниже:

<button id="remove-event" name="remove-event" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>

Вы можете удалить обработчик события onclick инлайн и сделать это следующим образом.

document.querySelector("#remove-event").addEventListener("click", function() { 
    var elem = document.querySelector("#event-details"); 
    if (elem.style.display == "none") { 
     elem.style.display = "block"; 
    } else { 
     elem.style.display = "none"; 
    } 
});

источник

2015-03-27 14:13:48 lshettyl

Может быть попробовать these-

1) Изменение Дива идентификатор других вместо того, чтобы имя класса

2) Здесь вы проверяете для «никто», но я думаю, что если вы не показывают div нигде в вашем коде до вызова этого кода, вы можете удалить предложение if, поскольку этот div уже скрыт, и если предложение не будет работать, если оно уже скрыто.

if (document.getElementById("event-details").style.display == "none") { 
     document.getElementById("event-details").style.display=""; 
    }

3) Попробуйте потребительных вместо

document.getElementById("event-details").style.display="";

document.getElementById("event-details").style.display=block;

или

document.getElementById("event-details").show();

источник

2015-03-27 14:17:20 Kanchana

Показать/скрыть элемент Div с помощью кнопки javascript нажмите

ответ

Смежные вопросы