Quiero pedirle a un usuario tanto el nombre como una pregunta con un método prompt(), pero cuando intento agregar 2 métodos prompt(), uno para el nombre y otro para la pregunta, aparece este error: No se pueden establecer las propiedades de nulo (configurando 'innerHTML') al intentar generar eso.
Pero si elimino el indicador de nombre de usuario (), el código funciona perfectamente
const userName = prompt("What is your name?", "Victor"); let userQuestion = prompt("Enter a question", "Can I sleep with my Boss?"); userName.length > 1 ? document.getElementById("8ball").innerHTML = "Hello " + userName + "!" : document.getElementById("8ball").innerHTML = "Hello!"; document.getElementById("ballQ").innerHTML = userName + " " + userQuestion; <div id="8ball"><p id="ballQ"></p> <div id="8BallResult"></div> </div>Dos problemas:
La línea con el ternario sobrescribe el HTML interno de #8ball . Eso elimina #ballQ y #8BallResult del DOM, porque son hijos de ese nodo; luego obtiene un error cuando intenta escribir en #ballQ que ya no existe.
prompt no siempre devuelve una cadena; si no hay entrada de usuario, devuelve null , y al intentar verificar la .length de null arrojará un error.
A continuación, reorganicé su HTML para evitar eliminar los nodos DOM que está tratando de mantener, y cambié la verificación de .length contra el nombre de usuario para que sea una simple verificación de veracidad (ya que todo lo que realmente está buscando es si el nombre existe).
También reorganicé las cosas para que el código fuera más fácil de leer: todas esas llamadas repetidas a document.getElementById estaban oscureciendo lo que estaba tratando de hacer.
let userName = prompt("What is your name?", "Victor"); let userQuestion = prompt("Enter a question", "Can I sleep with my Boss?"); let nodeOne = document.getElementById("8ball"); let nodeTwo = document.getElementById("ballQ"); nodeOne.innerHTML = (userName) ? "Hello " + userName + "!" : "Hello!"; nodeTwo.innerHTML = userName + " " + userQuestion; <div id="8ball"></div> <p id="ballQ"></p> <div id="8BallResult"></div>TypeError: document.getElementById(...) es nulo
Al configurar el HTML interno de un elemento, que no existe, devolverá un valor nulo.
Básicamente, está configurando una propiedad de nulo, lo que le está dando el error.
Asegúrese de que su código venga después del elemento seleccionado.
Pruebe el siguiente código.
<div id="8ball"> <p id="ballU"></p> <p id="ballQ"></p> <div id="8BallResult"></div> </div> const userEl = document.getElementById("ballU"); const questionEl = document.getElementById("ballQ"); const userName = prompt("What is your name?", "Victor"); const userQuestion = prompt("Enter a question", "Can I sleep with my Boss?"); userEl.innerHTML = userName ? Hello ${userName}!: Hello!; if (userQuestion) questionEl.innerHTML = ${userName} ${userQuestion};