Может кто-нибудь выяснить, почему addEventListener на моем div не работает? - PullRequest
Новая
       16

Может кто-нибудь выяснить, почему addEventListener на моем div не работает?

2 голосов
/ 25 мая 2019

Я пытаюсь добавить слушателя к маленькой кнопке, такой как div, чтобы я мог в конечном итоге изменить цвет после нажатия без необходимости использовать фактическую кнопку по разным причинам. Я видел, как несколько человек здесь говорили, что это работает или должно работать. Что-то я пропускаю или это просто невозможно? Просто ищу ответы!

Это довольно просто, и я убедился, что кнопка работает с той же функцией. 

//this is the entire js page at the moment
var WorkingOutManager = (function () {

    this.setCounter = 1;
    this.workoutCounter = 1;

    this.workoutID = "workout" + workoutCounter + "_set" + setCounter;

    this.changeState = () => {
        //I will eventually add the code to change the state of the div
        console.log(this.workoutID);
    }

    this.currentSetButton = document.getElementById(this.workoutID).
    this.currentSetButton.addEventListener("click", this.changeState);

    return {
        changeState: changeState
    }

})();

<body>
    <div id="banner">
        <a id="banner_text_link" href="../content/home.html">Work It Out</a>
    </div>
        <div id="wrapper">
            <div>
                <img id="page_image"
                    onclick="window.location.href='../content/home.html'"
                    src="../images/work_it_out_logo_workouts.png" alt="Work It
                    Out logo">
            </div>
            <!--Eventually, Display a Timer after pressing start -->
            <div id="current_workout">
                <div class="workout_exercise">
                    <div class="set_name">Pushups</div>
                    <div onclick="WorkingOutManager.changeState()"
                        class="set_exercise" id="workout1_set1">15</div>
                    <div class="set_exercise" id="workout1_set2">15</div>
                    <div class="set_exercise" id="workout1_set3">15</div>
                    <div class="set_exercise" id="workout1_set4">15</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Situps</div>
                    <div class="set_exercise" id="workout2_set1">TF</div>
                    <div class="set_exercise" id="workout2_set2">TF</div>
                    <div class="set_exercise" id="workout2_set3">TF</div>
                    <div class="set_exercise" id="workout2_set4">TF</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Pullups</div>
                    <div class="set_exercise" id="workout3_set1">TF</div>
                    <div class="set_exercise" id="workout3_set2">TF</div>
                    <div class="set_exercise" id="workout3_set3">TF</div>
                    <div class="set_exercise" id="workout3_set4">TF</div>
                </div>
                <button onclick="WorkingOutManager.changeState()"
                    id="add_exercise">COMPLETE WORKOUT</button>
            </div>
        </div>
    <script src="../scripts/working_out.js"></script>
</body>


#current_workout {
    color: rgb(48, 48, 48);
    width: 100%;
    height: auto;
}

.workout_exercise {
    background-color: #c4c4c4;
    height: 3rem;
    width: auto;
    align-content: center;
}

.set_name {
    color: #fafafa;
    float: left;
    height: 100%;
    padding: 0 0.2rem;
    width: calc(30% - 0.4rem);
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #c4c4c4;
    font-size: 1.6rem;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.set_exercise {
    float: right;
    width: calc(calc(70% / 4) - 0.2rem);
    height: 100%;
    padding: 0 0.1rem;
    margin: 0 0.1rem;
    border-radius: 50%;
    /* transform: rotate(-25deg);
    text-transform: rotate(25deg); */
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #fafafa;
}

Я не получаю никаких сообщений об ошибках, когда нажимаю на div с помощью прослушивателя onClick. На самом деле ничего не происходит. Кнопка в нижней части div «current_workout» работает правильно и регистрирует правильно отформатированный «workoutID».

1 Ответ

1 голос
/ 25 мая 2019

Это сработает, если я поменяю '.'в конце этой строки точка с запятой: 

this.currentSetButton = document.getElementById(this.workoutID).

Поскольку вы используете float: right для .set_exercise, элементы перечислены справа налево, а не слева направо.Кликабельный элемент, workout1_set1 находится в правом конце строки , а не слева.Я предполагаю, что вы нажали не на тот элемент.Я настроил вашу CSS, чтобы выделить кликабельный элемент в фрагменте ниже.

(обработчик запускается дважды, потому что у вас также есть атрибут onclick в div.)

FWIW - я не собираюсь рассказывать вам, как делать свое дело, - но я не вижу веской причины использовать float здесь (или вообще где-либо, вообще-то, на самом деле).Вы можете достичь этого макета с помощью flexbox, сетки или таблицы и избежать всех головных болей, которые возникают при работе с плавающими элементами.(Я обычно не поддерживаю таблицы, но можно утверждать, что это является таблицей.) 

var WorkingOutManager = (function () {

    this.setCounter = 1;
    this.workoutCounter = 1;

    this.workoutID = "workout" + workoutCounter + "_set" + setCounter;

    this.changeState = () => {
        //I will eventually add the code to change the state of the div
        console.log(this.workoutID);
    }

    this.currentSetButton = document.getElementById(this.workoutID);
    this.currentSetButton.addEventListener("click", this.changeState);

    return {
        changeState: changeState
    }

})();
#current_workout {
    color: rgb(48, 48, 48);
    width: 100%;
    height: auto;
}

.workout_exercise {
    background-color: #c4c4c4;
    height: 3rem;
    width: auto;
    align-content: center;
}

.set_name {
    color: #fafafa;
    float: left;
    height: 100%;
    padding: 0 0.2rem;
    width: calc(30% - 0.4rem);
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #c4c4c4;
    font-size: 1.6rem;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.set_exercise {
    float: right;
    width: calc(calc(70% / 4) - 0.2rem);
    height: 100%;
    padding: 0 0.1rem;
    margin: 0 0.1rem;
    border-radius: 50%;
    /* transform: rotate(-25deg);
    text-transform: rotate(25deg); */
    text-align: center;
    vertical-align: center;
    line-height: 3rem;
    /* border-style: outset; */
    background-color: #fafafa;
}

#workout1_set1 {
  background: red;
  color: white;
  font-weight: bold;
}
<div id="banner">
        <a id="banner_text_link" href="../content/home.html">Work It Out</a>
    </div>
        <div id="wrapper">
            <div>
                <img id="page_image"
                    onclick="window.location.href='../content/home.html'"
                    src="../images/work_it_out_logo_workouts.png" alt="Work It
                    Out logo">
            </div>
            <!--Eventually, Display a Timer after pressing start -->
            <div id="current_workout">
                <div class="workout_exercise">
                    <div class="set_name">Pushups</div>
                    <div onclick="WorkingOutManager.changeState()"
                        class="set_exercise" id="workout1_set1">15</div>
                    <div class="set_exercise" id="workout1_set2">15</div>
                    <div class="set_exercise" id="workout1_set3">15</div>
                    <div class="set_exercise" id="workout1_set4">15</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Situps</div>
                    <div class="set_exercise" id="workout2_set1">TF</div>
                    <div class="set_exercise" id="workout2_set2">TF</div>
                    <div class="set_exercise" id="workout2_set3">TF</div>
                    <div class="set_exercise" id="workout2_set4">TF</div>
                </div>
                <div class="workout_exercise">
                    <div class="set_name">Pullups</div>
                    <div class="set_exercise" id="workout3_set1">TF</div>
                    <div class="set_exercise" id="workout3_set2">TF</div>
                    <div class="set_exercise" id="workout3_set3">TF</div>
                    <div class="set_exercise" id="workout3_set4">TF</div>
                </div>
                <button onclick="WorkingOutManager.changeState()"
                    id="add_exercise">COMPLETE WORKOUT</button>
            </div>
        </div>
...