Файл cookie не регистрируется, следовательно, функция не запущена

#javascript #html

#javascript #HTML

Вопрос:

мой код приведен ниже —

 var userName_cookie = document.cookie.split("; ").find(row => row.startsWith("username")).split("=")[1];

function noUserName() {
    console.log("noUserName()");
    document.getElementById("known").style.display = "none"; // make sure that the known div is hidden
    document.getElementById("not-known").style.display = "block";
    document.getElementById("submit-btn").onclick = function() {
        console.log("Submit btn clicked")
        userName_cookie = document.getElementById("enter-name").value;
        userNameKnown();
    }
}

function userNameKnown() {
    // add user name to cookie
    userName_cookie = document.getElementById("enter-name").value;
    document.getElementById("not-known").style.display = "none"; // make sure that the unknown div is hidden
    document.getElementById("known").style.display = "block";
    // edit known div to show username
    document.getElementById("hello").innerText = `Hello, ${userName_cookie}`
    // time (good morning, good evening etc.)
    var date = new Date();
    var hours = date.getHours();
    if(hours < 12) {
        document.getElementById("time").innerText = `Good Morning`;
    } else if(hours == 12) {
        document.getElementById("time").innerText = `Good Noon? or Afternoon, shall I say?`;
    }
    else if(hours > 12 amp;amp; hours <= 16) {
        document.getElementById("time").innerText = `Good Afternoon`;
    } else if(hours > 16) {
        document.getElementById("time").innerText = `Good Evening`;
    }
    document.getElementById("known").style.display = "block";
}

if(userName_cookie === undefined) {
    noUserName();
} else {
    userNameKnown();
} 
 #not-known {
    display: block;
    text-align: center;
    font-size: 40px;
}
#not-known > input {
    color: black;
    font-size: 30px;
}

#submit-btn:hover {
    cursor: pointer;
}

#known {
    font-size: 40px;
    text-align: center;
    display: none;
} 
 <!-- Hello, What is your name -->
    <div id="not-known">
        <p>Hello, What is your name?</p>
        <input type="text" placeholder="Enter your name here" id="enter-name">
        <input type="button" value="submit" id="submit-btn">
    </div>
    <!-- If known -->
    <div id="known">
        <p id="hello">Hello,</p>
        <p id="time">Good</p>
    </div> 

Он находится на домашней странице моего сайта, https://aaditya-baduni.github.io /. Как вы можете видеть в конце кода JS, if(userName_cookie === undefined) {noUserName();} кажется, что функция noUserName() не запущена, так как я не могу отобразить «известный» div.

Я должен сохранить имя пользователя как файл cookie. Что я хочу, чтобы имя было зарегистрировано как cookie при нажатии на тег ввода отправки, отображение неизвестного div должно быть установлено как «нет», а отображение известного div должно быть установлено как «блок» (функция userNameKnown () должна быть запущена)

Ответ №1:

Ваш код, считывающий файл cookie, выдаст ошибку, прежде чем вы перейдете к if инструкции:

 document.cookie.split("; ").find(row => row.startsWith("username")).split("=")[1];
 

Если .find() не будет получено никаких совпадений, он вернется undefined , что означает, что вы вызываете undefined.split() , что приведет к ошибке.

Простой способ исправить это — использовать условную цепочку:

 document.cookie.split("; ").find(row => row.startsWith("username"))?.split("=")[1];
 

? Перед .split() проверкой проверяет, что он не пытается вызвать функцию undefined , и предотвратит ошибку и позволит продолжить выполнение кода для выполнения вашего оператора if.