Функция JavaScript не работает согласованно

Question

Я пытаюсь создать динамическое меню, которое отображает только некоторые вопросы, если на предыдущий вопрос был дан ответ.У меня это работает для одного из вопросов, но следующий выдает ошибку Uncaught TypeError: Cannot read property 'length' of undefined, хотя код практически идентичен.

Вот функция JavaScript, которую я вызываю:

// displays div when input is not empty
function showOnInput(div, input) {
    let x = document.getElementById(`${input}`);
    let y = document.getElementById(`${div}`);
    if (x.value.length > 0) {
        y.style.display = 'block';
    } else {
        y.style.display = 'none';
    }
}

и вот код HTML, в который он вызывается:

<div id="customizeChar" class="text">
    <form>
    <div id="name">
        <label>What is your character's name?</label>
        <br>
        <input v-model="fname" id="fname" placeholder="First Name" onkeyup="showOnInput('age', 'fname')">
        <input v-model="lname" id="lname" placeholder="Last Name">
    </div>
    <br>
    <div id="age" style="display: none">
        <label>How old is {{fname}} {{lname}}?</label>
        <br>
        <input v-model="age" id="age" placeholder="Age" onkeyup="showOnInput('sex', 'age')">
        <label style="font-size: 80%">years old</label>
    </div>
    <br><br>
    <div id="sex" style="display: none">
        <label>Is {{fname}} a male or female?</label>
        <br>
        <select v-model="sex">
            <option>Male</option>
            <option>Female</option>
        </select>
    </div>
    </form>
</div>

Блок age скрыт, пока ввод не будет введен в блок name, как и ожидалось, но вводитответ в блоке age затем выдает ошибку Uncaught TypeError.

Answer 1

Я смог заставить это делать то, что хотел, используя директиву Vue v-if. Вот заключительный HTML:

<div id="customizeChar" class="text">
    <form>
    <div id="name">
        <label>What is your character's name?</label>
        <br>
        <input v-model="fname" id="fname" placeholder="First Name">
        <input v-model="lname" id="lname" placeholder="Last Name">
    </div>
    <br>
    <div id="age" v-if="fname != ''">
        <label>How old is {{fname}} {{lname}}?</label>
        <br>
        <input v-model="age" id="age" placeholder="Age">
        <label style="font-size: 80%">years old</label>
    </div>
    <br><br>
    <div id="sex" v-if="age != ''">
        <label>Is {{fname}} a male or female?</label>
        <br>
        <select v-model="sex">
            <option>Male</option>
            <option>Female</option>
        </select>
    </div>
    </form>
</div>

Дайте мне знать, если есть улучшения, которые я могу сделать.