如何让 addEventListener 单击有条件地使用 hbs 中的单选按钮

Question

这个hbs文件只在else条件下调用js文件，从不在if条件下调用js文件。期望的结果是，如果选中男性单选按钮，则单击按钮时生成男性名称，否则单击按钮时生成女性名称。

相关 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>`;
    });
}

Answer 1

我认为您的问题是在将 handlebarsjs 提供给用户之前对其进行了评估。因此，当用户与页面交互时，只有 else 选项存在。您可能应该做的是根据比率按钮的值使用 JS if/else。

How to get the selected radio button’s value?

如何让 addEventListener 单击有条件地使用 hbs 中的单选按钮

How to have an addEventListener click conditional work with radio buttons in hbs

html

javascript

handlebars.js

handlebarshelper

express-handlebars