JavaScript函数似乎不能一致地工作

Question

I'm trying to create a dynamic menu that only displays certain questions if the previous question has been answered. I've got it to work for one of the questions, but the next one throws the error Uncaught TypeError: Cannot read property 'length' of undefined , even though the code is virtually identical.

Here's the JavaScript function I'm calling:

// 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';
    }
}

and here's the HTML code it's being called in:

<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>

The age block is hidden until an input is given in the name block, as expected, but inputting an answer in the age block then throws the Uncaught TypeError error.

Answer 1

I was able to get this to do what I wanted using Vue's v-if directive. Here's the final 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>

Let me know if there are improvements I can make.