JavaScript字符串比较问题：输入字符与单词首字母匹配失效

你的代码存在多个关键问题导致首字母对比失效，以下是逐一修复方案：

1. 语法错误修正 #

wordList数组末尾多了一个冗余的}，导致数组定义无效，修正后：

const wordList = [{
  word: "Grand",
  hint: "Something large"
},
{
  word: "Drank",
  hint: "An act of consuming liquids"
}]

2. 冗余赋值写法优化 #

你误用了逗号运算符赋值首字母，(random, wordList[random].word.slice(0, 1))里的random完全多余，直接简化为：

let firstLetter = wordList[random].word.slice(0, 1);

secondLetter的赋值同理。

3. 随机数逻辑调整 #

页面加载时生成的random变量不会随按钮点击更新，导致每次点击都是同一个单词。需要把随机数生成逻辑移到按钮点击事件内部：

startBtn.onclick = function() {
  startBtn.innerHTML = "Submit"
  // 每次点击重新生成随机索引
  let random = Math.floor(Math.random() * wordList.length);
  const targetWord = wordList[random].word;
  console.log(random, targetWord);
  clueText.innerHTML = wordList[random].hint;
  const firstLetter = targetWord.slice(0, 1);
  const secondLetter = targetWord.slice(-1);
  console.log(firstLetter);
  console.log(secondLetter);
  // 后续逻辑...
}

4. 大小写匹配处理 #

单词首字母为大写（如"Grand"的"G"），用户输入小写"g"时对比会失败，统一转成小写后再对比：

if (firstLetter.toLowerCase() === this.value.toLowerCase()) {
  console.log('Correct!')
}

5. 无效代码与重复事件处理 #

• HTML中不存在inputtwo元素，代码里获取该元素会返回null，导致后续b.focus()和b.onkeyup报错，要么添加对应HTML元素，要么删除相关无效代码。
• 你给a重复绑定了keyup事件，会导致触发多次，建议合并逻辑到一个事件处理函数中。

6. 变量声明规范 #

所有DOM元素变量都未加let/const，会成为隐式全局变量，容易引发冲突，补充声明：

const startBtn = document.querySelector('.mybutton')
const clueText = document.querySelector('.clue-text')
const interiorOne = document.querySelector('#interior-one')
const a = document.getElementById("inputone");

修复后的完整代码 #

JavaScript #

const startBtn = document.querySelector('.mybutton')
const clueText = document.querySelector('.clue-text')
const interiorOne = document.querySelector('#interior-one')

const wordList = [{
  word: "Grand",
  hint: "Something large"
},
{
  word: "Drank",
  hint: "An act of consuming liquids"
}]

const a = document.getElementById("inputone");

a.onkeyup = function() {
  if (this.value.length === 1) {
    console.log(a.value);
  }
}

startBtn.onclick = function() {
  startBtn.innerHTML = "Submit"
  let random = Math.floor(Math.random() * wordList.length);
  const targetWord = wordList[random].word;
  console.log(random, targetWord);
  clueText.innerHTML = wordList[random].hint;
  const firstLetter = targetWord.slice(0, 1);
  
  // 替换原有keyup逻辑，统一处理输入与验证
  a.onkeyup = function() {
    if (this.value.length === 1) {
      console.log(a.value);
      if (firstLetter.toLowerCase() === this.value.toLowerCase()) {
        console.log('Correct!')
      } else {
        console.log('Wrong!')
      }
    }
  }
}

HTML #

<div class="inputs">
  <input id="inputone" type="text" class="exterior-letters" maxlength="1">
</div>
<div id="clue-text" class="clue-text"></div>
<div>
  <button class="mybutton">Start</button>
</div>

内容的提问来源于stack exchange，提问作者user16252597