Обновлено: в этом вопросе есть глупая ошибка, которую я не проверял раньше, и теперь я не могу удалить этот вопрос, ПОЖАЛУЙСТА, ИГНОРИРУЙТЕ.
Я создал простой веб-сайт, следуя руководству, которое в основном делает две очень простые вещи.
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&utm_medium=referral&utm_campaign=image&utm_content=81244">David Mark</a> from <a href = "https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&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 + " :)";
}
Мне очень жаль, это была ошибка с моей стороны, я не проверил, я удалю этот вопрос как можно скорее.
но в коде JavaScript мы просто не вызываем setUserName() функция, вместо этого она проходит через условный оператор (if-else) (как следует из учебника).
Но вы называете это:
setUserName(); // <--- Here you call it before the if / else
if (!localStorage.getItem("Name")) {
setUserName();
}
Прошу прощения, это была ошибка с моей стороны, я не проверял
Не надо жалеть :)
Вы называете
setUserName()
в строке передif (!localStorage.getItem("Name"))