Блог

Главная - Вопросы по программированию - Javascript не может найти функцию

Javascript не может найти функцию

#javascript #function

Вопрос:

Мой 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>

Мой 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();

Я чувствую, что я совершенно слеп, но по какой-то причине всякий раз, когда я нажимаю любую из 2 кнопок, которые я сделал, я получаю следующее:

 53a.html:12 Uncaught TypeError: cookie.fortune is not a function
    at HTMLButtonElement.onclick (3a.html:12)

Пожалуйста, помогите. Я не понимаю, почему мой JS не может вызвать эту функцию. Должно быть, я пропустил что-то крошечное, но я полностью застрял в туннельном зрении.

Комментарии:

1. Вы проверили, что код в вашем файле 3a действительно запущен? Может быть, путь неверен или файл находится не там, где вы ожидаете? Попробуйте добавить console.log в него инструкцию и посмотрите, записано ли что-нибудь.

2. Можете ли вы подтвердить, что cookie.add() это работает так, как ожидалось?

Ответ №1:

Попробуйте переименовать cookie переменную на другое имя. Это похоже на конфликт 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>

Ответ №2:

Я предполагаю, что Cookie-это одно из имен, которые противоречат именам, существующим в общем контексте. Дайте ему более индивидуальное название, например «FortuneCookie», и оно должно сработать.

Метки: