Динамически создаваемые кнопки Javascript не работают должным образом или вызывают функцию

0

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

Цель кода - определить, сколько дней в месяце и динамически создать кнопку, относящуюся к каждому из этих дней. Наложение этого "календаря" - это div с кнопкой закрытия, которая будет содержать детали вопроса, кнопка закрытия закрывает этот div, чтобы открыть "календарь" внизу.

У меня есть ряд проблем; во-первых, кнопки не действуют, как buttons-, курсор не изменяется на указатель мыши, а псевдо-классы для зависания, активного и т.д. не распознаются. Во-вторых, хотя у кнопок, как представляется, есть "щелчок", прослушиватель, прикрепленный в инспекторе хром-элементов, они не выполняют функцию "showQuestion".

Код выглядит следующим образом:

CSS

 .day {
    width: 15%;
    max-width: 120px;
    min-width: 60px;
    height: 15%;
    max-height: 120px;
    min-height: 60px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    margin: 5px;
    color: white;
    background-color:#000088;
    display:block;
    cursor:pointer;
}



  .day:hover, .day:active{
        background:#00ddff;
    }



 .day:focus{
        border 1px solid #000000;
    }



    .day.today{
        background-color: Red;
    }

    .centred{
        display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;      /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;   /* TWEENER - IE 10 */
        display: -webkit-flex;  /* NEW - Chrome */
        display: flex; 
        align-self: center;
        justify-content: ltr;
        flex-wrap: wrap;
    }

    #container {
        position: fixed;
        margin-top: 25%;
        margin-left: 10%;
        overflow: hidden;
        width: 80%;
        height: auto;
        background-color: yellow; 
        z-index: 1000;
    }



    #questionContainer{
        position:fixed;
        margin-top: 5%;
        margin-left: 5%;
        width: 90%;
        height: 90%;
        display:block;
        background-color: green;
        z-index:3000;
    }



     #closeButton{
        background: blue;
        text-decoration: : none;
        padding: 5px 5px 5px 25px;
        border:none;
        color:white;
        cursor:pointer;

    }



 .show {
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity:1;
        filter:alpha(opacity=100); /*IE transparency*/
    }



 #closeButton:hover, #closeButton:active{
        background:#ffffff;
    }

    #closeButton:focus{
        border 1px solid #000000;
    }




 .hide {  
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity: 0; 
        filter:alpha(opacity=0); /*IE transparency*/
    }

HTML-код

<body>

<div id="container" class="centred">
</div>

<div id = "questionContainer" class="centred">
    <button id = "closeButton" class = "show" onClick="hideQuestion()">Close</button>
</div>

</body>

Javascript

 var qtnContainer = document.getElementById("questionContainer");

    function hideQuestion(){
        qtnContainer.className = "hide";
    }

     function showQuestion(){
        qtnContainer.className = "show";
    }

    Date.prototype.daysInThisMonth=function() {
        return new Date(this.getFullYear(),this.getMonth()+1,0).getDate();
    };

    var days = new Date().daysInThisMonth();
    var today = new Date().getDate();

    //alert("days in month = "+ days);
    //alert("day of the month = "+ today);

    for (var i = 0; i < days; i++){
        var dayBtn = document.createElement("button");
        dayBtn.innerHTML = "Day "+(i+1);
        document.getElementById("container").appendChild(dayBtn); 
        if(dayBtn !== null){
            dayBtn.id = "day"+(i+1);
            dayBtn.className = "day";
            dayBtn.addEventListener("click",showQuestion, false);
        }

    } 

    alert("day"+today);

    if(dayBtn.id = "day"+today){
    document.querySelector("#day"+today).className += " today";
    }

Хотя я ценю любую помощь, которую я получаю, пожалуйста, не предоставляйте мне какие-либо решения jQuery, я хочу создать функциональность в чистом javascript, чтобы улучшить свое понимание языка.

Заранее благодарю за любую помощь!

  • 0
    какой браузер вы проверяете? это работает для меня в Firefox.
Теги:
button

3 ответа

0
Лучший ответ

Ну, событие было правильно подключено, но ваш questionContainer все еще блокировал любое взаимодействие с мышью. Использовать pointer-events: none чтобы исправить это.

Как это:

 .hide {  
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity: 0; 
        filter:alpha(opacity=0); /*IE transparency*/
        pointer-events:none;
    }

Посмотрите, как это работает: http://jsfiddle.net/t9zvS/1/

Возможно, у вас будут проблемы в IE. Изучите эту тему SO: Пропустите мышиные события через абсолютно позиционированный элемент

Поделиться
  • 0
    Отлично, большое спасибо за вашу помощь и ваш быстрый ответ, я рассмотрю вопросы IE, как советовали. Я никогда не слышал о «событиях указателя»!
1

Итак, у вас есть несколько небольших проблем с кодом, но мимо них все работает.

Прежде всего, предполагая, что это весь ваш файл javascript, вы пытаетесь запустить код, который ищет элементы на странице, когда страница еще не загружена полностью. Итак, что вам нужно сделать, только начинает выполнять этот код, когда тело загрузилось. Просто сделать, просто измените тег тела, чтобы выглядеть примерно так:

<body onload="now_do_stuff()">

А затем оберните JS, который в настоящее время не находится внутри функции, в этой новой функции. Итак, что-то вроде:

function now_do_stuff() {

    qtnContainer = document.getElementById("questionContainer");

    for (var i = 0; i < days; i++){
        var dayBtn = document.createElement("button");
        dayBtn.innerHTML = "Day "+(i+1);
        document.getElementById("container").appendChild(dayBtn); 
        if(dayBtn !== null){
            dayBtn.id = "day"+(i+1);
            dayBtn.className = "day";
            dayBtn.addEventListener("click",showQuestion, false);
        }

    } 

    alert("day"+today);

    if(dayBtn.id = "day"+today) {
        document.querySelector("#day"+today).className += " today";
    }
}

И тогда это сработает!

Обратите внимание, что я переместил первую строку (где вы объявляете qtnContainer) в эту функцию тоже, и удалил ее "var". Причина этого заключается в том, что она сделает глобальную переменную, к которой тогда будут доступны другие функции (т.е. hideQuestion и showQuestion).

Поделиться
  • 0
    Большое спасибо за вашу помощь, ваши ответы и ответы спассвогеля вместе означают, что он работает. Однако в Chrome это не сработало без CSS-указателя. Я подумал, что это может быть связано с созданием элементов, но надеюсь, что в нуль-условии «если» это было сказано. Я уверен, что добавление действия к телу станет для меня очень полезным советом в будущем. Еще раз спасибо за быстрый ответ.
0

Вы должны делегировать событие click.

Поэтому вместо: dayBtn.addEventListener("click",showQuestion, false);

Он должен быть: document.getElementById("day"+(i+1)).addEventListener("click",showQuestion, false);

Что-то вроде этого я думаю. (не уверен, поскольку я использую в основном jQuery)

Поделиться
  • 0
    Спасибо за ваш совет, я уверен, что вы правы, но слушатель сейчас работает «как есть», и если он не сломается, я не буду пытаться это исправить! Я буду иметь в виду ваше предложение, хотя, когда оно сломается в будущем ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню