Почему «подсказка» появляется снова и снова?

Обновлено: в этом вопросе есть глупая ошибка, которую я не проверял раньше, и теперь я не могу удалить этот вопрос, ПОЖАЛУЙСТА, ИГНОРИРУЙТЕ.

Я создал простой веб-сайт, следуя руководству, которое в основном делает две очень простые вещи.

1). Изменяет изображение всякий раз, когда мы нажимаем на него.

2). Каждый раз спрашивает у пользователя имя.

HTML

<html>
  <head>
    <meta charset = "utf-8">
    <title>The Great Himalayas</title>
  
    <link href = "styles/style.css" rel = "stylesheet">
    <link href = "https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap" rel = "stylesheet">

  </head>
  <body>
    <h1>Himalayas</h1>

    <img src = "images/himalayas.jpg" alt = "Image showing himalayan mountains">
    <p>Image by <a href = "https://pixabay.com/users/12019-12019/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=81244">David Mark</a> from <a href = "https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=81244">Pixabay</a></p>
    
    <p>The majestic Himalayas: An escape to the heaven, the dwelling place of our dreams.
      The ice covered rock sphears pointing to the ultimate stage of consciousness,
      filled with the experience of millions of years, giving us direction to the expanding universe,
      where one seeks truth, because of the maze-valleys leading us to the exceptional realities,
      we don't know whether they are gigantic or atomic since everything is insignificant in the great workings of the universe,
      All we can do is just breathe....
    </p>

    <p>What you want:</p>
    <ul>
      <li>Mindset</li>
      <li>Will Power</li>
      <li>Courage</li>
      <li>Motivation</li>
    </ul>

    <p>What you will get!</p>
    <ol>
      <li>Experience</li>
      <li>Learnings</li>
      <li>Hope</li>
      <li>Beauty</li>
    </ol>

    <a href = "https://www.sciencedirect.com/topics/earth-and-planetary-sciences/himalayas">Learn more about the "almighty's home" here</a>
    <button>Change User</button>
    <script src = "scripts/main.js"></script>
  </body>
</html> 

CSS

html {
  font-size: 10px; 
  font-family: 'Josefin Slab', serif; 
  background-color: #A8D0FF;
}

img {
    width: 100%;
    height: auto;
  
    display: block;
    margin: 0 auto;
}

h1 {
  font-size: 80px;
  text-align: center;

  margin: 0;
  padding: 30px 0;
  color: #A8D0FF;
  text-shadow: 3px 3px 1px black;
}

p,li,a {
  font-size: 16px; 
  line-height: 1.5;
  letter-spacing: 1px;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #CBE3FF;
  padding: 0 15px 20px 15px;
  border: 5px solid #5CB6D5;
}

JavaScript

let himImg = document.querySelector("img") ;

himImg.onclick = function() {
    let himSrc = himImg.getAttribute("src");
    if (himSrc === "images/himalayas.jpg")
        {
            himImg.setAttribute("src","images/himalayas-2.jpg");
        }
    else
        {
            himImg.setAttribute("src","images/himalayas.jpg");
        }
}

let userButton = document.querySelector("button");
let userHeading = document.querySelector("h1");

//--------------------------------------------------------------------------------------
setUserName();
if (!localStorage.getItem("Name")) {
    setUserName();                                     
} 
else {
    let storedName = localStorage.getItem("Name");                                                  
    userHeading.textContent = "Go to the Himalayas' " + storedName + " :)";
}
//-----------------------------------------------------------------------------------------

function setUserName() {
    let myName = prompt("Plese enter your Name :)");
    localStorage.setItem("Name",myName);
    userHeading.textContent = "Go to the Himalayas' " + myName + " :)";
}

но в коде JavaScript мы просто не вызываем функцию setUserName(), вместо этого она проходит через условный оператор (if-else) (как следует из руководства).

setUserName();
if (!localStorage.getItem("Name")) {
    setUserName();                                    
} 
else {
    let storedName = localStorage.getItem("Name");                                                        
    userHeading.textContent = "Go to the Himalayas' " + storedName + " :)";
}
  • Я думаю, что функция условного оператора состоит в том, чтобы запускать функцию setUserName() ( if () ) только тогда, когда тип данных Name не существует, а в других случаях, когда он существует (то есть пользователь установил имя пользователя во время предыдущего посещения) , мы извлекаем сохраненное имя с помощью getItem() и устанавливаем textContent заголовка в строку плюс имя пользователя * Но каждый раз, когда я обновляю страницу, она снова отображает подсказку, почему? (может и не должно, так как я уже делал это ранее) Я застрял, пожалуйста, помогите!

Вы называете setUserName() в строке перед if (!localStorage.getItem("Name"))

Andreas 19.12.2020 18:53

Мне очень жаль, это была ошибка с моей стороны, я не проверил, я удалю этот вопрос как можно скорее.

jyotirmayyy 19.12.2020 18:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
83
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

но в коде JavaScript мы просто не вызываем setUserName() функция, вместо этого она проходит через условный оператор (if-else) (как следует из учебника).

Но вы называете это:

setUserName(); // <--- Here you call it before the if / else
if (!localStorage.getItem("Name")) {
    setUserName();                                    
} 

Прошу прощения, это была ошибка с моей стороны, я не проверял

jyotirmayyy 19.12.2020 18:53

Не надо жалеть :)

Fels 20.12.2020 22:48

Другие вопросы по теме