我想测试用户输入是否是元音。但该程序每次都会显示else输出

Question

<p>Please insert a letter: <br/> 
        <input id="demo" type="text" name="letter" placeholder="Insert a letter">
        <button type="button" onclick="test()">Check it</button> <br>
        <span id="res"></span>
    </p>

<script type="text/javascript">
let vowel = document.getElementById('demo').value;

function test() {
    if (vowel === 'a' || vowel === 'e' || vowel === 'i' || vowel === 'o' || vowel === 'u') {
        document.getElementById('res').innerHTML = 'This is a vowel !'; 
    } else {
        document.getElementById('res').innerHTML = 'This is a consonant !'; 

    }
}

Answer 1

你只在vowel之外定义test一次，所以它不会更新，它总是等于""。我还使用if重构了你的String.prototype.includes声明

function test() {
  let vowel = document.getElementById('demo').value;
  if ("aeiou".includes(vowel)) {
    document.getElementById('res').innerHTML = 'This is a vowel !';
  } else {
    document.getElementById('res').innerHTML = 'This is a consonant !';
  }
}

<p>Please insert a letter: <br/>
  <input id="demo" type="text" name="letter" placeholder="Insert a letter">
  <button type="button" onclick="test()">Check it</button> <br>
  <span id="res"></span>
</p>

Answer 2

您的vowel变量被设置在测试函数的范围之外，因此单击该按钮时不会更新它。您需要将其移动到范围内，如下所示：

function test() {
    let vowel = document.getElementById('demo').value;

    if (vowel === 'a' || vowel === 'e' || vowel === 'i' || vowel === 'o' || vowel === 'u') {
        document.getElementById('res').innerHTML = 'This is a vowel !'; 
    } else {
        document.getElementById('res').innerHTML = 'This is a consonant !'; 
    }
}