CODEWITHSUNDEEP
javascripthtmlbuttonalert
LemmyX
LemmyX

Reputation: 137

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

I've been making a website where if you click a button an alert box pops up. But after I click the button the word "undefined" appears on the side of my document.

The way that I have been doing it is like this: 


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

For some reason, after I click the button, the words "undefined" appear on the document. As you can see if you run the snippet, once you click one of the "buy" buttons, if you scroll down to the bottom of the product page, you will see the word "undefined" on the left. Should I not be using this method? 

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>

Is there any way to stop this from happening without changing my method? I apologize that it is so messy, it's not meant to be run on the stack overflow snippet creator.

NOTE: This website isn't meant to be professional. In fact, it's meant to be poorly designed. That's why I'm using the <center> attribute.

Upvotes: 0

Views: 253

Answers (3)

Fanalea
Fanalea

Reputation: 171

Why would you like to set innerHTML of element to 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>

This will fix your issue.

Upvotes: 1

Charlie Schliesser
Charlie Schliesser

Reputation: 8237

In javascript, any undefined variable (or property) is undefined (which is a type, like String, Object, Date, null, etc). When this result is coerced into a string, it appears as the actual string "undefined". Try these in your browser's console to get a feel for it:

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

When you assign the innerHTML property of your div to the result of the alert function (which doesn't return anything, and therefore a value of undefined), you're coercing it into the string "undefined" and setting that to be the innerHTML of the div. What is your actual intended behavior?

Upvotes: 0

Jamiec
Jamiec

Reputation: 136124

The alert method in javascript returns no value, which in javascript is undefined.

You're setting the span inner html to that value

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

I'm curious what you think the above line did.

Upvotes: 3

Related Questions