I
I
Ivan2019-08-31 21:51:54
JavaScript
Ivan, 2019-08-31 21:51:54

How to trigger Pug mixin to be rendered on button click?

The idea is this: when you click on one of the five buttons in the markup, a new block should appear in which there will be a review, for each event (button) the review text will be different. I don't understand how to combine event listener and mixins.

.row
            .col-lg.worker
                button(type="button" class="worker__button" id="worker-1")
                    img(src="./img/content/workers/worker-1.png", alt="worker")

                button(type="button" class="worker__button" id="worker-2")
                    img(src="./img/content/workers/worker-2.png", alt="worker")

                button(type="button" class="worker__button" id="worker-3")
                    img(src="./img/content/workers/worker__active.png", alt="worker")

                button(type="button" class="worker__button" id="worker-4")
                    img(src="./img/content/workers/worker-4.png", alt="worker")

                button(type="button" class="worker__button" id="worker-5")
                    img(src="./img/content/workers/worker-5.png", alt="worker")

mixin review(rev)
    - var worker = document.getElementById('worker-1');
        p.review__text= rev
    .row
        .col-lg
            .review
                +rev("Nice work!")
                +rev("Awesome!")

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question