"Undefined" 警告框触发后出现在文档的一侧

Question

我一直在制作一个网站，如果您单击一个按钮，就会弹出一个警告框。但是在我单击按钮后，"undefined" 一词出现在我的文档的一侧。

我一直以来的做法是这样的：


<button onclick="run()">Click me</button>
<span id="no"></span>
<script>
function no() {
document.getElementById("no").innerHTML = alert("This is an alert box");
}
</script>

不知为何，点击按钮后，文档上出现了"undefined"字样。如您所见，如果您运行代码段，一旦您单击其中一个 "buy" 按钮，如果您向下滚动到产品页面的底部，您将看到单词 "undefined"左边。我不应该使用这种方法吗？

function purchase() {
  document.getElementById("no").innerHTML = alert("Sorry, but we're all sold out! Try again later.");
}

<!DOCTYPE html>
<html>

<head profile="http://www.w3.org/2005/10/profile">
  <title>Buy stuff at a high price!</title>
  <link rel="icon" type="image/png" href="https://cdn.hipwallpaper.com/i/63/61/AykYVG.png">
</head>

<body>

  <style>
    center.mission {
      font-family: serrif;
      font-size: 180%;
      background-color: rgb(100, 200, 0);
      LINE-HEIGHT: 1;
    }
    
    body {
      background-color: rgb(196, 255, 196);
    }
  </style>


  <!--Our products-->
  <p>
    </br>
    <center class="products">
      <h1>OUR PRODUCTS</h1>
    </center>
    <center>
      <h3>NO RETURNS</h3>
    </center>
    <br/>
    <div id="column1">Single sheet 8.5"/11" printer paper
      <br/>
      <img src="https://www.backgroundsy.com/file/large/blank-paper-background.jpg" height="150px" width="350px" />
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column2">Single sheet 8.5"/11" printer paper(pre-crumpled)
      <br/>
      <center><img src="https://149351503.v2.pressablecdn.com/wp-content/uploads/2015/09/paper_71_closed.png" height="150px" width="200px" /></center>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column3">Single CD-R disc, scratched
      <br/>
      <img src="https://i.redd.it/akbvkcw2xgmz.jpg" height="150px" width="250px" />
      <br/>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <style>
      center.products {
        color: green;
        background-color: purple;
      }
      
      div {
        float: left;
        height: 200px;
        width: 200px;
        padding: 0 10px;
      }
      
      #column1 {
        background-color: lightgrey;
        width: 30%;
      }
      
      #column2 {
        background-color: grey;
        width: 30%;
      }
      
      #column3 {
        background-color: darkgrey;
        width: 30%;
      }
    </style>
    <div id="column4">Single toilet paper square for quarentine days
      <br/>
      <img src="https://photos1.blogger.com/blogger/7265/3234/1600/napkin.jpg" height="150px" width="250px" />
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column5">Single use toothpick
      <br/>
      <center><img src="https://sc02.alicdn.com/kf/HTB1sYpPQpXXXXcPXXXXq6xXFXXXu.jpg" height="150px" width="300px" /></center>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column6">10cm dental floss
      <br/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Dental_floss_%28whole%29.jpg" height="150px" width="250px" />
      <br/>
      <button onclick="purchase()">BUY NOW FOR 9.99</button>
    </div>
    <style>
      center.products {
        color: green;
        background-color: purple;
      }
      
      div {
        float: left;
        height: 200px;
        width: 200px;
        padding: 0 10px;
      }
      
      #column4 {
        background-color: darkgrey;
        width: 30%;
      }
      
      #column5 {
        background-color: lightgrey;
        width: 30%;
      }
      
      #column6 {
        background-color: grey;
        width: 30%;
      }
    </style>

    <!--For click events-->
    <span id="no"></span>

</body>

</html>

有没有办法在不改变我的方法的情况下阻止这种情况发生？我很抱歉它太乱了，它并不意味着运行在 stack overflow snippet creator 上。

注意：本网站并非专业网站。事实上，它意味着设计不佳。这就是我使用 <center> 属性的原因。

Answer 1

alert方法在javascriptreturns中没有值，在javascript中是undefined。

您正在将 span 内部 html 设置为该值

document.getElementById("no").innerHTML = alert("Sorry, but we're all sold out! Try again later.");

我很好奇你认为上面的行做了什么。

Answer 2

为什么要将元素的 innerHTML 设置为提醒？

function purchase() {
  alert("Sorry, but we're all sold out! Try again later.");
}

<!--Copyright 2020 AWOL Industries International. All rights reserved-->

<!DOCTYPE html>
<html>

<head profile="http://www.w3.org/2005/10/profile">
  <title>Buy stuff at a high price!</title>
  <link rel="icon" type="image/png" href="https://cdn.hipwallpaper.com/i/63/61/AykYVG.png">
</head>

<body>
  <center>
    <h1 style="color:red; background-color:black">AWOL INDUSTRIES INTERNATIONAL</h1>
  </center>


  <style>
    center.mission {
      font-family: serrif;
      font-size: 180%;
      background-color: rgb(100, 200, 0);
      LINE-HEIGHT: 1;
    }
    
    body {
      background-color: rgb(196, 255, 196);
    }
  </style>


  <!--Our products-->
  <p>
    </br>
    <center class="products">
      <h1>OUR PRODUCTS</h1>
    </center>
    <center>
      <h3>NO RETURNS</h3>
    </center>
    <br/>
    <div id="column1">Single sheet 8.5"/11" printer paper
      <br/>
      <img src="https://www.backgroundsy.com/file/large/blank-paper-background.jpg" height="150px" width="350px" />
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column2">Single sheet 8.5"/11" printer paper(pre-crumpled)
      <br/>
      <center><img src="https://149351503.v2.pressablecdn.com/wp-content/uploads/2015/09/paper_71_closed.png" height="150px" width="200px" /></center>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column3">Single CD-R disc, scratched
      <br/>
      <img src="https://i.redd.it/akbvkcw2xgmz.jpg" height="150px" width="250px" />
      <br/>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <style>
      center.products {
        color: green;
        background-color: purple;
      }
      
      div {
        float: left;
        height: 200px;
        width: 200px;
        padding: 0 10px;
      }
      
      #column1 {
        background-color: lightgrey;
        width: 30%;
      }
      
      #column2 {
        background-color: grey;
        width: 30%;
      }
      
      #column3 {
        background-color: darkgrey;
        width: 30%;
      }
    </style>
    <div id="column4">Single toilet paper square for quarentine days
      <br/>
      <img src="https://photos1.blogger.com/blogger/7265/3234/1600/napkin.jpg" height="150px" width="250px" />
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column5">Single use toothpick
      <br/>
      <center><img src="https://sc02.alicdn.com/kf/HTB1sYpPQpXXXXcPXXXXq6xXFXXXu.jpg" height="150px" width="300px" /></center>
      <button onclick="purchase()">BUY NOW FOR .99</button>
    </div>
    <div id="column6">10cm dental floss
      <br/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Dental_floss_%28whole%29.jpg" height="150px" width="250px" />
      <br/>
      <button onclick="purchase()">BUY NOW FOR 9.99</button>
    </div>
    <style>
      center.products {
        color: green;
        background-color: purple;
      }
      
      div {
        float: left;
        height: 200px;
        width: 200px;
        padding: 0 10px;
      }
      
      #column4 {
        background-color: darkgrey;
        width: 30%;
      }
      
      #column5 {
        background-color: lightgrey;
        width: 30%;
      }
      
      #column6 {
        background-color: grey;
        width: 30%;
      }
    </style>

    <!--For click events-->
    <span id="no"></span>

</body>

</html>

这将解决您的问题。

Answer 3

在javascript中，任何未定义的变量（或属性）都是undefined（这是一个类型，如String、Object、Date、null、等等）。当此结果被强制转换为字符串时，它显示为实际字符串 "undefined"。在浏览器的控制台中尝试这些以感受一下：

console.log(foo);
console.log(window.foo);
console.log(String(window.foo));

当您将 div 的 innerHTML 属性分配给 alert function 的结果时（没有 return 任何东西，因此undefined 的值），您将其强制转换为字符串 "undefined" 并将其设置为 div 的 innerHTML。您的实际预期行为是什么？

"Undefined" 警告框触发后出现在文档的一侧

"Undefined" appears on side of document after alert box triggers

html

javascript

alert

button