Javascript showing undefined error

[keeping getting an undefined error in Javascript not sure how to fix it]

//basic html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>
 okay  
 
     <script src="script.js"></script>
     <script src="script2.js"></script>
      <script src="app.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

//JS code

var yaakovGreeter = {};
var greeting = "Hi";
yaakovGreeter.name = "Yaakov";
yaakovGreeter.sayHello = function   ()  {
  console.log("greeting" + yaakovGreeter.name);
  
  }
  
(function (window)  {
    var johnGreeter = {};
     johnGreeter.name = "John";
     var greeting = "Hi"  "; 
     johnGreeter.sayHi = function ( )  {
     console.log(greeting +  johnGreeter.name);
  
        window.johnGreeter = johnGreeter;
  
  } )(window);


    yaakovGreeter.sayHello( );
    johnGreeter.sayHi( );

Not sure why but johnGreeter is undefined
1 Like

so if you want it to work:

//basic html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->

  </head>
  <body>
    <h1>Hello, world!</h1>
 okay  
 
     <!-- <script src="script.js"></script>
     <script src="script2.js"></script>
      <script src="app.js"></script>
    <script src="js/bootstrap.min.js"></script> -->
    <script>

var yaakovGreeter = {};
var greeting = "Hi";
yaakovGreeter.name = "Yaakov";
yaakovGreeter.sayHello = function(){
  console.log("greeting" + yaakovGreeter.name); 
  };
  
(function (window){
    var johnGreeter = {};
     johnGreeter.name = "John";
     var greeting = "Hi";
     johnGreeter.sayHi = function(){
     console.log(greeting +  johnGreeter.name);
     };
    window.johnGreeter = johnGreeter; 
  })(window);


    yaakovGreeter.sayHello();
    johnGreeter.sayHi();
    </script>
  </body>
</html>
1 Like