Question 52758 in Javascript Question posted in
A very good W3school tutorial can be found here.

Need help calling function – Javascript

I’m trying to create buttons with information featured in JavaScript. When I load my website, the buttons won’t load any information. I think it comes down to the "name" I gave the function but I could be wrong. Where have I messed up in the body portion of my code?

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
<title>Module 7</title>
<link rel="stylesheet" type="text/css" href="style7.css">
<header> <img src="goose.png" height="190" width="190"></img><p>Space Goose Gaming Depot</p>     
</header>
<script type="text/javascript">

/* this is my constructor example that features video game consoles, game genres, and accessories to purchase */
    function gameProducts (gamingsystem, gamegenre, gameaccessory){
        this.console = gamingsystem;
        this.genre = gamegenre; 
        this.accessory = gameaccessory;  
          }

          /*when you click on the button, this function will appear. Each button features a gaming brand and what hot deals are available*/
    this.writegameProducts = function (){
     
     
        var str = "Are you interested in purchasing a " + this.console + " ? " + "Look no further, we feature a wide range of their latest and vintage products. Stop by to purchase or trade in a video game. If you trade in a video game, you can get a 20% discount on the purchase of their newest game,  " +this.genre+ ". We are also offering 45% your entire purchase if you buy a new  " + this.accessory;
     
        writeText(str, "products");                                             
    }
     
    /* This will write some text out to an html element. The text to write and the id of the html
element to write to are parameters.
*/
     function writeText(txt, destination){
     document.getElementById(destination).innerHTML=txt;
           } 
                
         /* gaming variables */
        var Nintendo = new gameProducts ("Nintendo Switch","Super Mario Party","Nintendo Switch Lite case");
        var PlayStation = new gameProducts("PS5","Hogwarts Legacy","DualSense™ Edge Wireless Controller");
        var Xbox = new gameProducts("Xbox Series X","NBA 2K23","Gamevice Flex for Android");
        var Steam = new gameProducts("Steam Deck","Apex Legends","JSAUX Steam Deck Dock");
</script>
</head>
<body>
<div class="productinfo">
<p>Current Deals and Steals!</p> </div>

<button>
<input type="button" onclick= "Nintendo.writegameProducts()"  value = "Nintendo" name="gameProducts"/>
<input type="button" onclick= "PlayStation.writegameProducts();" value = "PlayStation" name="gameProducts"/>
<input type="button" onclick= "Xbox.writegameProducts();"  value = "Xbox" name="gameProducts"/>
<input type="button" onclick= "Steam.writeGameProducts();" value = "Steam"  name="gameProducts"/>
</button>

</body>
</html>

I’ve tried to adjust the name in input section but again, I don’t know what goes in the name section or what is actually wrong with this example:

<input type="button" onclick= "Nintendo.writegameProducts()"  value = "Nintendo" name="gameProducts"/>
Tags:

2

Answers


  1. 0

    First you are calling document.getElementyById(‘products’) in writegameProducts and your html doesn’t have any element so that is always null, consider change the class productsinfo for id=’products’ or something like that.

    Second the function writegameProducts should be inside the gameProducts so that when you instantiate it you have that method on your object.

    With those changes it should work correctly.

    <!DOCTYPE html>
<head>
 <meta charset="utf-8">
<title>Module 7</title>
<link rel="stylesheet" type="text/css" href="style7.css">
<header> 
  <img src="goose.png" height="190" width="190"/>
  <p>Space Goose Gaming Depot</p>     
</header>

<script type="text/javascript">
  /* this is my constructor example that features video game consoles, game genres, and accessories to purchase */
  function gameProducts (gamingsystem, gamegenre, gameaccessory){
    this.console = gamingsystem;
    this.genre = gamegenre; 
    this.accessory = gameaccessory;  
    /*when you click on the button, this function will appear. Each button features a gaming brand and what hot deals are available*/
    this.writegameProducts = function () {
      var str = "Are you interested in purchasing a " + this.console + " ? " + "Look no further, we feature a wide range of their latest and vintage products. Stop by to purchase or trade in a video game. If you trade in a video game, you can get a 20% discount on the purchase of their newest game,  " +this.genre+ ". We are also offering 45% your entire purchase if you buy a new  " + this.accessory;
      writeText(str, "products");                                             
    }
  }
     
  /* This will write some text out to an html element. The text to write and the id of the html element to write to are parameters. */
  function writeText(txt, destination){
    document.getElementById(destination).innerHTML=txt;
  } 
            
  /* gaming variables */
  var Nintendo = new gameProducts ("Nintendo Switch","Super Mario Party","Nintendo Switch Lite case");
  var PlayStation = new gameProducts("PS5","Hogwarts Legacy","DualSense™ Edge Wireless Controller");
  var Xbox = new gameProducts("Xbox Series X","NBA 2K23","Gamevice Flex for Android");
  var Steam = new gameProducts("Steam Deck","Apex Legends","JSAUX Steam Deck Dock");
</script>
</head>
<body>
  <div class="productinfo" id="products">
  <p>Current Deals and Steals!</p> </div>

  <button>
    <input type="button" onclick= "Nintendo.writegameProducts()"  value = "Nintendo" name="gameProducts"/>
    <input type="button" onclick= "PlayStation.writegameProducts();" value = "PlayStation" name="gameProducts"/>
    <input type="button" onclick= "Xbox.writegameProducts();"  value = "Xbox" name="gameProducts"/>
    <input type="button" onclick= "Steam.writegameProducts();" value = "Steam"  name="gameProducts"/>
  </button>
</body>
</html>
    Login or Signup to reply.
  2. 0

    There is a scoping issue. Below is the fixed version of your code:

    <!DOCTYPE html>

<head>
   <meta charset="utf-8">
   <title>Module 7</title>
   <link rel="stylesheet" type="text/css" href="style7.css">
   <header> <img src="goose.png" height="190" width="190"></img>
      <p>Space Goose Gaming Depot</p>
   </header>
   <script type="text/javascript">

      /* this is my constructor example that features video game consoles, game genres, and accessories to purchase */
      function gameProducts(gamingsystem, gamegenre, gameaccessory) {
         this.console = gamingsystem;
         this.genre = gamegenre;
         this.accessory = gameaccessory;

         this.writegameProducts = function () {


            var str = "Are you interested in purchasing a " + this.console + " ? " + "Look no further, we feature a wide range of their latest and vintage products. Stop by to purchase or trade in a video game. If you trade in a video game, you can get a 20% discount on the purchase of their newest game,  " + this.genre + ". We are also offering 45% your entire purchase if you buy a new  " + this.accessory;

            writeText(str, "products");
         }
      }

      /*when you click on the button, this function will appear. Each button features a gaming brand and what hot deals are available*/


      /* This will write some text out to an html element. The text to write and the id of the html
  element to write to are parameters.
  */
      function writeText(txt, destination) {
         document.getElementById(destination).innerHTML = txt;
      }

      /* gaming variables */
      var Nintendo = new gameProducts("Nintendo Switch", "Super Mario Party", "Nintendo Switch Lite case");
      var PlayStation = new gameProducts("PS5", "Hogwarts Legacy", "DualSense™ Edge Wireless Controller");
      var Xbox = new gameProducts("Xbox Series X", "NBA 2K23", "Gamevice Flex for Android");
      var Steam = new gameProducts("Steam Deck", "Apex Legends", "JSAUX Steam Deck Dock");
   </script>
</head>

<body>
   <div class="productinfo">
      <p>Current Deals and Steals!</p>
   </div>

   <button>
      <input type="button" onclick="Nintendo.writegameProducts()" value="Nintendo" name="gameProducts" />
      <input type="button" onclick="PlayStation.writegameProducts();" value="PlayStation" name="gameProducts" />
      <input type="button" onclick="Xbox.writegameProducts();" value="Xbox" name="gameProducts" />
      <input type="button" onclick="Steam.writeGameProducts();" value="Steam" name="gameProducts" />
   </button>

</body>

</html>

    Another thing missing is element with id products.

    writeText(str, "products");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search