Mi HTML:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Assignment A</title> </head> <body> <h1>Fortune cookies!</h1> <input type="text" id="input" placeholder="Add a fortune" /> <button onclick="cookie.add()">Add a fortune!</button><br /> <button onclick="cookie.fortune()">What does your fortune hold?</button> <p id="output"></p> <script src="3a.js"></script> </body> </html>Mi javascript:
class Cookie { constructor() { this.fortunes = ["Insert meaningful quote here.", "insert meaningless quote here."]; } add() { this.fortunes.push(document.getElementById("input").value); document.getElementById("output").innerHTML = "fortune added!"; } fortune() { document.getElementById("output").innerHTML = this.fortunes[Math.random(--this.fortunes.length)]; } } var cookie = new Cookie();Siento que estoy completamente ciego, pero por alguna razón cada vez que hago clic en cualquiera de los 2 botones que hice, obtengo lo siguiente:
53a.html:12 Uncaught TypeError: cookie.fortune is not a function at HTMLButtonElement.onclick (3a.html:12)Por favor ayuda. No entiendo por qué mi JS no puede llamar a esta función. Debo haberme perdido algo pequeño, pero estoy completamente atrapado en una visión de túnel.
Intente cambiar el nombre de la variable de cookie a otro nombre. Parece un conflicto con document.cookie .
var cookie = new Cookie(); -> var cookieObj = new Cookie();
onclick="cookie.add()" -> onclick="cookieObj.add()"
onclick="cookie.fortune()" -> onclick="cookieObj.fortune()"
class Cookie { constructor() { this.fortunes = ["Insert meaningful quote here.", "insert meaningless quote here."]; } add() { this.fortunes.push(document.getElementById("input").value); document.getElementById("output").innerHTML = "fortune added!"; } fortune() { console.log('fortune'); document.getElementById("output").innerHTML = this.fortunes[Math.random(--this.fortunes.length)]; } } var cookieObj = new Cookie(); <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Assignment A</title> </head> <body> <h1>Fortune cookies!</h1> <input type="text" id="input" placeholder="Add a fortune" /> <button onclick="cookieObj.add()">Add a fortune!</button><br /> <button onclick="cookieObj.fortune()">What does your fortune hold?</button> <p id="output"></p> <script src="3a.js"></script> </body> </html>Supongo que Cookie es uno de los nombres que están en conflicto con los nombres que existen en el contexto general. Dale un nombre más individual como "FortuneCookie" y debería funcionar.