JavaScript问答游戏：函数执行顺序与变量未定义问题求助

一、done()方法使用错误的修正 #

done()是Promise对象的专属方法，你的pedirNombre和triviaA都是同步函数，完全不支持这个方法。而且你写的triviaA(0).done(pedirNombre)直接调用了triviaA(0)，这就是它提前执行的核心原因。

解决：直接删掉triviaA(0).done(pedirNombre)这行代码。因为pedirNombre是同步执行的（prompt会阻塞代码直到用户完成输入），它执行完毕后才会绑定按钮事件，按钮只有被点击时才会触发triviaA，不会提前执行。

二、pregunta未定义的问题修复 #

点击按钮时出现未定义错误，是三个问题叠加导致的：

1. 事件监听传参错误 #

按钮点击事件默认会把事件对象传给回调函数，而不是你预期的索引i。所以triviaA里的i是事件对象，用它取preguntas_respuestas[i]自然返回undefined。

修正方式：用匿名函数包裹，手动传递索引：

botonA.addEventListener('click', () => triviaA(0))

2. triviaA函数语法错误 #

• 模板字符串未闭合反引号
• 模板字符串里直接写pregunta.p不会解析变量，要改成${pregunta.p}
• 函数缺少闭合大括号

修正后的triviaA函数：

let triviaA = (i) => {
  // 取对应索引的问题
  let pregunta = preguntas_respuestas[i]
  // 生成HTML字符串，正确插入变量
  let p_html = `<h5>${pregunta.p}</h5>`
  // 用innerHTML解析HTML，innerText会把标签当纯文本显示
  bienvenida.innerHTML = p_html
}

3. 额外优化：处理索引越界 #

可以加个判断，防止传入的索引超出数组范围：

let triviaA = (i) => {
  if (i < 0 || i >= preguntas_respuestas.length) {
    console.error('索引超出范围')
    return
  }
  let pregunta = preguntas_respuestas[i]
  let p_html = `<h5>${pregunta.p}</h5>`
  bienvenida.innerHTML = p_html
}

三、修正后的完整代码 #

JavaScript #

//ELEMENTOS GLOBALES
let preguntas_respuestas = [
    {
        p: '¿Qué significa tomarse la pastilla roja?',
        r: ['Liberarse de la realidad virtual de matrix y dirigirse al mundo real', ' respuesta incorrecta ', ' respuesta incorrecta']
    },
    {
        p: '¿Cuál es el nombre real de Neo?',
        r: ['Thomas', 'respuesta incorrecta', 'respuesta incorrecta']            
    }, 
    {
        p: '¿Qué actriz interpretó a Trinity?',
        r: ['Carrie Anne Moss', 'respuesta incorrecta', 'respuesta incorrecta']            
    },
    {
        p: '¿Cómo se llama el aerodeslizador de transporte de Morfeo?',
        r:['Nebuchadnezzar', 'respuesta incrrecta', 'respuesta incorrecta']            
    }
]

let contenedor = document.getElementById('contenedor')
let bienvenida = document.querySelector('.bienvenida')
let divBotones = document.createElement('div')
divBotones.setAttribute('id', 'divBotones')
let botonA = document.createElement('button')
botonA.innerText = 'Preguntas de tipo A'    
let botonB = document.createElement('button')
botonB.innerText = 'Preguntas de tipo B'
    
let pedirNombre = (nombre) => {
    nombre = prompt('Bienvenidx \n ¿Cuál es tu nombre?')
    if(nombre !== null ){
        bienvenida.innerText = `Hola ${nombre.toUpperCase()}, ¿listx para jugar?`
    } else {
        bienvenida.innerText = 'Hola Anonimx, ¿listx para jugar?'
    } 
    contenedor.appendChild(divBotones)
    divBotones.append(botonA, botonB)
}

pedirNombre()

//creando una funcion para las preguntas tipo A
let triviaA = (i) => {
    if (i < 0 || i >= preguntas_respuestas.length) {
        console.error('索引超出范围')
        return
    }
    //tomando la pregunta del array de preguntas 
    let pregunta = preguntas_respuestas[i]
    //colocar la pregunta dentro del html
    let p_html = `<h5>${pregunta.p}</h5>`
    bienvenida.innerHTML = p_html
}

//agregar event listener al boton A，手动传递索引0
botonA.addEventListener('click', () => triviaA(0))

CSS #

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #4d09cd;
    
}

#contenedor{
    width: 400px;
    height: 450px;
    background-color: rgb(228, 233, 88);  
    border-radius: 1rem;
   box-shadow: 10px 10px black;
   padding: 5%;
   position: relative;
   top: 20rem;
   left: 20rem;
   overflow: auto;   
}

.bienvenida{
    font-size: 25px;
    text-align: left;
    
}
.botonA, .botonB{
    padding: 0.5rem ;
    border-radius: 1rem;
    background-color: #4d09cd;
    color: white;
    font-weight: bold;
}

#divBotones button{
    font-size: large;
    padding: 0.5rem ;
    border-radius: 1rem;
    background-color: #4d09cd;
    color: white;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px; /* 加个间距优化布局 */
}

.correcto{
    padding: .5rem;
    background-color: rgb(145, 218, 34);
    border-radius: 1rem;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}
.incorrecto{
    padding: .5rem;
    background-color: rgb(188, 21, 21);
    border-radius: 1rem;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}
.circulo{
    background-color: rgb(145, 218, 34);
    border-radius: 1rem;
}

HTML #

<main>
    <div id="contenedor">
        <h5 class="bienvenida"></h5>
    </div>
</main>

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