【发布时间】:2021-03-30 00:52:00
【问题描述】:
编辑:这个问题有一个我以前没有检查过的愚蠢错误,现在我无法删除这个问题,请忽略。
我按照教程创建了一个简单的网站,主要做了两件非常简单的事情
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 + " :)";
}
- 我认为条件语句的功能是只运行setUserName()函数(if())当 >Name 数据类型不存在,else 存在时(即用户在上次访问时设置了用户名),我们使用 getItem( ) 并将标题的 textContent 设置为字符串,加上用户名 * 但是每次我刷新页面时它都会再次显示提示,为什么? (它可能不应该因为我之前已经做过)我被卡住了,请帮助!
【问题讨论】:
-
你在
if(!localStorage.getItem("Name"))之前的行中调用setUserName() -
很抱歉,这是我这边的一个错误,我没有检查它我会尽快删除这个问题
标签: javascript html function if-statement conditional-statements