Как использовать 2 и более одного и того же HTML кода на 1 странице?

Question

[VitalyDmi]

Здравствуйте. Я в этом деле новичок и хотел бы спросить у профи. Мне нужно добавить один и тот же Random случайных фраз на 1 страницу, только с разными значениями.
Первый Random:

<style> 
.red { 
  color: Yellow 
} 
</style> 
<script> 
document.addEventListener('DOMContentLoaded', () => {
    let easyTimer = (function(words, timer, greetings, element) {
        render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer
        render(`Готов к лету?`)
        setTimeout(() => {
            setTimeout(() => element.classList.remove('red'), 1000)
            let interval = setInterval(() => timer— && render() && 0 === timer && clearInterval(interval), 1000)
        }, greetings * 1000)
    })(

        ['Да', 'Конечно да'],
        5,
        1, // сколько секунд показывать "Ответ готов" 
        document.querySelector('.rnd-word')
    )
})
</script> 
<div> 
<div> 
  <div class="rnd-word red"></div> 
</div>

Второй Random:

<style> 
.red { 
  color: Blue
} 
</style> 
<script> 
document.addEventListener('DOMContentLoaded', () => {
    let easyTimer = (function(words, timer, greetings, element) {
        render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer
        render(`Хотел бы на море?`)
        setTimeout(() => {
            setTimeout(() => element.classList.remove('red'), 1000)
            let interval = setInterval(() => timer— && render() && 0 === timer && clearInterval(interval), 1000)
        }, greetings * 1000)
    })(

        ['Да', 'Нет'],
        5,
        1, // сколько секунд показывать "Ответ готов" 
        document.querySelector('.rnd-word')
    )
})
</script> 
<div> 
<div> 
<div class="rnd-word red"></div> 
</div>

Я добавляю эти два кода на 1 страницу, но отображается только 1. Что мне нужно исправить, чтобы была возможность использовать первый рандом и второй рандом на одной странице?
Спасибо заранее.

Comments

[dollar]

Не форматированный код сложно воспринимать. А вам легко? Внёс правки

Answer 1

[pashted]

сделать два блока с разными селекторами?

<style> 
.yellow { 
color: Yellow 
} 
</style> 

.....

setTimeout(() => element.classList.remove('yellow'), 1000)

.....

document.querySelector('.rnd-word.yellow') 

.....

<div class="rnd-word yellow"></div> 
...

Comments

[VitalyDmi]

Да, теперь появляются оба рандома, но первый не работает (просто стоит надпись "Готов к лету?"). Что может быть не так, сэр?

[pashted]

пользуйтесь нормальным редактором а-ля notepad++ или sublime text. который будет показывать ошибки. у вас элементарные синтаксические ошибки.

click

<style>
        .yellow {
            color: Yellow
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let easyTimer = (function (words, timer, greetings, element) {
                let render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer;
                render(`Готов к лету?`);
                setTimeout(() => {
                    setTimeout(() => element.classList.remove('yellow'), 1000);
                    let interval = setInterval(
                        () => timer - render() && 0 === timer && clearInterval(interval), 1000
                    )
                }, greetings * 1000)
            })(
                ['Да', 'Конечно да'],
                5,
                1, // сколько секунд показывать "Ответ готов"
                document.querySelector('.rnd-word.yellow')
            )
        })
    </script>
    <div>
        <div class="rnd-word yellow"></div>
    </div>
    <style>
        .red {
            color: Blue
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let easyTimer = (function (words, timer, greetings, element) {
                let render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer;
                render(`Хотел бы на море?`);
                setTimeout(() => {
                    setTimeout(() => element.classList.remove('red'), 1000);
                    let interval = setInterval(
                        () => timer - render() && 0 === timer && clearInterval(interval), 1000
                    )
                }, greetings * 1000)
            })(
                ['Да', 'Нет'],
                5,
                1, // сколько секунд показывать "Ответ готов"
                document.querySelector('.rnd-word.red')
            )
        })
    </script>
    <div>
        <div class="rnd-word red"></div>
    </div>

а, возможно, еще и логические. но тут я уже не представляю, что вы хотите реализовать данным кодом

[VitalyDmi]

pashted, извините, я скорей всего вам надоел, но, у меня после
"Готов к лету?" и "Хотел бы на море?" выскакивает таймер с обратным отсчетом и он останавливается на первой же секунде. Вы не знаете в чем дело? Спасибо за ваше старание)

[pashted]

VitalyDmi, это потому, что логика вашего приложения работает так, как вы ее написали. скажите, что вы хотите в итоге получить, и я, возможно, смогу сказать что-то более полезное

[VitalyDmi]

pashted,
Допустим: задайте себе какой-нибудь вопрос, и рандом вам скажет делать или не делать после нажатия кнопки "Получить ответ". Пример:

Вопрос:
- Человек: идти сегодня в магазин?
- Random: да

- Человек: купить белую блузку?
- Random: нет

- Человек: пойти завтра на работу?
- Random: нет

[pashted]

мой вариант на Jquery

<script
            src="http://code.jquery.com/jquery-3.3.1.slim.js"
            integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
            crossorigin="anonymous"></script>
    <style>
        .yellow {
            color: darkgreen;
        }

        .red {
            color: Blue
        }
    </style>
    <script>(function ($) {
            $(document).ready(function () {
                let variants = [
                        "Да",
                        "Нет",
                        "Конечно да",
                        "Конечно нет",
                        "Не знаю"
                    ];

                $('button').on({
                    click() {
                        $(this)
                            .next('p')
                            .text(variants[parseInt(Math.random() * variants.length)]);
                    }
                })
            });
        })(jQuery);

    </script>
    <div>
        <button class="rnd-word yellow">Готов к лету?</button>
        <p></p>
    </div>
    <div>
        <button class="rnd-word red">Хотел бы на море?</button>
        <p></p>
    </div>

[VitalyDmi]

pashted, ого, спасибо вам огромное!!!)))

[pashted]

VitalyDmi, не за что. если помогло - отметьте ответ решением