javascript reference error while trying to implement mvc

Question

Hey I am new to javascript and I am trying to create a simple mvc app.

This is my model.js:

     function Question(question,hint,answer){

        this.question = question;
        this.hint = hint;
        this.answer = answer;
    }

This is my view.js:

    function view(modelList){
    this.modelList = modelList;

    }

view.prototype.show = function(){
   var length  = this.modelList.length;
   for(var i=0;i<length;i++){
         alert(this.modelList[i].question);
         console.log(this.modelList[i].question);
   }
};

This is my controller.js:

    function controller(modelList){
      this.view = new view(modelList);
    }


controller.prototype.show = function(){
     this.view.show();
};

This is my index.html:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="app.js"></script>
  <script src="controller.js"></script>
  <script src="model.js"></script>
  <script src="view.js"></script>
</head>

<body>
</body>


</html>

When I run index.html on my browser, I am getting a error like this:

jQuery.Deferred exception: model is not defined ReferenceError: model is not defined at HTMLDocument. (file:///D:/Javascript/MVC/app.js:3:23) at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948) at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined

and

> Uncaught ReferenceError: model is not defined
    at HTMLDocument.<anonymous> (app.js:3)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

Can anyone please tell me where I am wrong??

ThankYou

EDIT:

This is my app.js:

    $(function(){

     var model1 = new model("question","hint","answer");
     var model2 = new model("question2","hint2","answer2");

     var modelList = {model1,model2};

     var controller = new controller(modelList);
     controller.show();


});

I strongly suggest you paste all your code to jsfiddle.net and get it working there (with our help). And then paste back into individual files once you fix the problem. This back-and-forth is progressing very slowly. — Ateş Göral
– Ateş Göral, Commented Jan 25, 2017 at 5:55
jsfiddle.net/weeuedub this where I have uploaded the code please check it out — Sumanth Jois
– Sumanth Jois, Commented Jan 25, 2017 at 5:59

Ateş Göral · Accepted Answer · 2017-01-25 06:11:42Z

1

Here's the fixed version: https://jsfiddle.net/weeuedub/1/

Added jQuery as a dependency (which you don't need to do in your own app).
Renamed your controller class to Controller.

The problem was this line:

var controller = new controller(...);

Because you were using the variable name "controller", it overrides the "controller" function declared above.

As a convention, try naming your classes starting with an uppercase letter.

Update: https://jsfiddle.net/weeuedub/2/

You were assigning modelList as { model1, model2 }, which is not an array you can iterate through by getting the length. It's an object that is identical to: { model1: model1, model2: model2 }. This is ES6 syntax that is not widely supported by browsers yet, and I assume it was just a typo on your part. The fix was to change that to [ model1, model2 ] to get an array.

edited Jan 25, 2017 at 6:11

answered Jan 25, 2017 at 6:04

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sumanth Jois Over a year ago

where can i view the console in jsfiddle ! did alert box show up for you??

Ateş Göral Over a year ago

It's the regular JS console of your browser.

Sumanth Jois Over a year ago

Thankyou it was really helpfull

Suraj Rao · Accepted Answer · 2017-01-25 05:59:11Z

0

Your model.js defines a Question function

You should either change it to

function model(question,hint,answer){}

or change the instantiation to Question.

var model1 = new Question("question","hint","answer");
var model2 = new Question("question2","hint2","answer2");

edited Jan 25, 2017 at 5:59

answered Jan 25, 2017 at 5:44

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Collectives™ on Stack Overflow

javascript reference error while trying to implement mvc

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related