警报框触发后，文档一侧出现“未定义”
我一直在制作一个网站，如果您单击按钮，就会弹出一个警报框。但在我单击按钮后，“未定义”一词出现在文档的一侧。
我一直这样做的方式是这样的：
<button onclick="run()">Click me</button>
<span id="no"></span>
<script>
function no() {
document.getElementById("no").innerHTML = alert("This is an alert box");
}
</script>
由于某种原因，单击按钮后，文档上出现“未定义”字样。正如您所看到的，如果您运行该代码片段，一旦您单击其中一个“购买”按钮，如果您向下滚动到产品页面的底部，您将在左侧看到“未定义”一词。我不应该使用这种方法吗？
有什么办法可以在不改变我的方法的情况下阻止这种情况发生吗？我很抱歉它太混乱了，它不适合在堆栈溢出片段创建器上运行。
注意：本网站并不具有专业性。事实上，它的设计很糟糕。这就是我使用该<center>属性的原因。
扬帆大鱼浏览 90回答 3
3回答
-
MYYA
javascript 中的方法alert没有返回值，而 javascript 中的返回值是undefined.您将span内部 html 设置为该值document.getElementById("no").innerHTML = alert("Sorry, but we're all sold out! Try again later.");我很好奇你认为上面这行做了什么。 -
潇湘沐
为什么要设置要提醒的元素的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 $19.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 $34.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 $42.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 $12.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 $6.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 $339.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>这将解决您的问题。 -
至尊宝的传说
在 javascript 中，任何未定义的变量（或属性）都是undefined（这是一种类型，如String、Object、Date、null等）。当这个结果被强制转换为字符串时，它显示为实际的字符串“未定义”。在浏览器的控制台中尝试以下操作来感受一下：console.log(foo);console.log(window.foo);console.log(String(window.foo));当您将 div 的属性分配给警报函数innerHTML的结果（它不返回任何内容，因此值为）时，您将其强制转换为字符串“undefined”并将其设置为分区 您的实际预期行为是什么？undefined
随时随地看视频慕课网APP
相关分类
Html5