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>

让我知道我是否可以改进。

JavaScript函数似乎无法始终如一地工作

1 个答案: