【问题标题】:Why the 'prompt' is coming again & again? [closed]为什么“提示”会一次又一次地出现? [关闭]
【发布时间】: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&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 数据类型不存在,else 存在时(即用户在上次访问时设置了用户名),我们使用 getItem( ) 并将标题的 textContent 设置为字符串,加上用户名 * 但是每次我刷新页面时它都会再次显示提示,为什么? (它可能不应该因为我之前已经做过)我被卡住了,请帮助!

【问题讨论】:

  • 你在if(!localStorage.getItem("Name"))之前的行中调用setUserName()
  • 很抱歉,这是我这边的一个错误,我没有检查它我会尽快删除这个问题

标签: javascript html function if-statement conditional-statements


【解决方案1】:

但是在 JavaScript 代码中,我们根本不调用 setUserName() 相反,它通过条件语句运行(if-else) (按照教程进行)。

但你确实这么称呼它:

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

【讨论】:

  • 很抱歉,这是我这边的一个错误,我没有检查它
  • 不必抱歉 :)
猜你喜欢
  • 1970-01-01
  • 2013-04-27
  • 1970-01-01
  • 2022-01-26
  • 2016-03-14
  • 2018-06-20
  • 2022-07-19
  • 1970-01-01
  • 2014-08-01
相关资源
最近更新 更多