Как сделать так, чтобы addEventListener нажимал условную работу с переключателями в hbs

Этот файл hbs вызывается только из файла js в условном выражении else и никогда не вызывается из файла js в условном выражении if. Желаемый результат заключается в том, что если установлен флажок мужского переключателя, мужское имя генерируется при нажатии кнопки, а женское имя генерируется при нажатии кнопки в противном случае.

Раздел соответствующего файла Handlebars:

<body>
    <div class  = "container">
        <h1> Random Name Generator</h1>
        <div class = "result"></div>
        <form id = "genders">
        <input type = "radio" id = "isMale" name = "gender" checked>Male</input>
        <input type = "radio" id = "isFemale" name = "gender">Female</input>
        </form>
        <button class = "btn btn-primary" id = "generate">Generate Name</button>
    </div>
    <script src = "./app.js"></script>
    <script src = "./app2.js"></script>
    <script>
        const resultDiv = document.querySelector('.result');
        const generateBtn = document.querySelector('#generate');
        generateBtn.addEventListener('click', () => {
      {{#if isMale}}
            loadRandomMaleName(resultDiv);  
        {{else}}
            loadRandomFemaleName(resultDiv);
        {{/if}}
        });
        </script>
</body>

Файл JavaScript для условия if:

const loadRandomMaleName = (resultDiv) => {
    fetch('http://localhost:3000/random-name')
    .then(response => response.json())
    .then(result => {
        resultDiv.classList.add('alert', 'alert-success');
        resultDiv.innerHTML = `<h2>${result.male_first_name} ${result.last_name}</h2>`;
    });
}

Файл JavaScript для условия else:

const loadRandomFemaleName = (resultDiv) => {
    fetch('http://localhost:3000/random-name')
    .then(response => response.json())
    .then(result => {
        resultDiv.classList.add('alert', 'alert-success');
        resultDiv.innerHTML = `<h2>${result.female_first_name} ${result.last_name}</h2>`;
    });
}

javascript html handlebars.js express-handlebars handlebarshelper

10.12.2020 21:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

220

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я считаю, что ваша проблема в том, что handlebarsjs оценивается до того, как он будет предоставлен пользователю. Поэтому, когда использование взаимодействует со страницей, существует только опция else. Что вам, вероятно, следует сделать, так это использовать if/else с использованием JS на основе значения кнопки отношения.

Как получить значение выбранного переключателя?

11.12.2020 16:37

Другие вопросы по теме

Удалить дочерний div из родительского div

Вызовы jQuery API не возвращают ожидаемые данные

Невозможно изменить цвета границ css при наведении

Как хранить выбранные запросы в виде div в EJS?

Как добавить разрыв строки в коде Rmarkdown?

Могу ли я использовать css-grid для отображения неизвестного количества элементов в порядке чтения слева направо в двух строках?

Ошибка setCustomValidity, но форма отправляется

Ориентация на HTML-идентификаторы, сгенерированные PHP с использованием эха

Базовый макет Bootstrap 4, вложенный контейнер внутри container-fluid

Изображение не загружается на веб-сайт, но загружается локально

Как сделать так, чтобы addEventListener нажимал условную работу с переключателями в hbs

Ответы 1

Другие вопросы по теме

Похожие вопросы