"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>

出于某种原因，在我单击按钮后，文档上会出现"未定义"字样。正如你所看到的，如果你运行这个片段，一旦你点击其中一个"购买"按钮，如果你向下滚动到产品页面的底部，你会在左边看到"未定义"一词。我不应该使用这种方法吗？

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 $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>

有没有办法在不改变我的方法的情况下阻止这种情况的发生？很抱歉，它太乱了，它不应该在堆栈溢出代码段创建者上运行。

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

javascript中的alert方法不返回值，在javascript中为undefined。

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

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

我很好奇你认为上面这条线做了什么。

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

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等(。当这个结果被强制为一个字符串时，它显示为实际的字符串"undefined"。在你的浏览器控制台上试试这些来感受一下：

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

当您将div的innerHTML属性分配给alert函数的结果(该函数不返回任何内容，因此值为undefined(时，您将其强制转换为字符串"undefined"，并将其设置为div的innerHTML。您实际的预期行为是什么？

相关内容

最新更新

热门标签：