CODEWITHSUNDEEP
javascripthtml
Alin St
Alin St

Reputation: 29

Button doesn't perform action when adding Item to list

I am trying to make an application using the MVC design in javascript where I am getting the input from a textbox and insert it into a listbox.

From my point of view, the MVC should be correctly implemented but there is something wrong when I'm creating an onclick event for the 'Add' button. Nothing happens when it's pressed.

There must be something that I am missing here...Can I get some guidance??

function Model(){

this.addValue = function(songName){
    var opt = document.createElement("option");
    var name = songName.value;
    name = name.toString();

    opt.text = name;
    opt.value = name;
    document.getElementById("lstBox").options.add(opt);

    return clear();
}

function clear(){
    document.getElementById('text').value = '';
    document.getElementById('artist').value = '';
    document.getElementById('genre').value = '';
    document.getElementById('type').value = '';
}};

This is my Controller:

function Controller(view, model){

this.addItem = function(song){
    model.addValue(song);
  };
};

And View:

function View(){

var songName = document.getElementById('text'),
artistName = document.getElementById('artist'),
genre = document.getElementById('genre'),
type = document.getElementById('type'),
addBtn = document.getElementById('click'),
listBox = document.getElementById('lstBox');

this.control = function(controller){
    addBtn.onclick = controller.addItem(songName);
}};

This is the HTML for textboxes and Listbox:

    <html>
  <head>
  <title>Application</title>
    <script src="View.js"></script>
	<script src="Model.js"></script>
	<script src="Controller.js"></script>
  </head>
  <body>
  <!-- Song Input view -->
  <h1>Music List</h1>
  <fieldset class="settingsView">
  <legend><b><i>Insert Song</i></b></legend><br>
	<label for="text">Insert song name:</label><br>
	<input type="text" id='text'/><br><br>	  
	<label for="artist">Artist:</label><br>
	<input type="text" id="artist"/><br><br>		
	<label for="genre">Genre</label>
	<select id="genre">	
	<option style='display: none'>
	  <option value="Pop">Pop</option>
	  <option value="Rock">Rock</option>
	  <option value="Dubstep">Dubstep</option>
	  <option value="Hip-Hop">Hip-Hop</option>
	</select><pre></pre>
	<label for="type">Type:</label>
	<select id="type">
	<option style='display: none'>
	  <option value="mp3">MP3</option>
	  <option value="mp4">MP4</option>
	  <option value="wmv">WMA</option>
	  <option value="mpg">WAV</option>
	</select><br><br><br>
	 <button class="bttn" type="button" id="click">Add</button><br>
	<style>
	.settingsView{
		width: 270px;
		float: left;
	}
	
	.bttn{
		width: 200px;
		height: 30px;
		margin: 0 auto;
		display: block;
	}
	</style>
	</fieldset>
    <label for="listText">Song List:</label><br>
	<select class="listBox" size="10" name="listBox" id="lstBox" multiple>
	<option selected>Nothing to see
	<option>Michael Jackson
	<option>Skrillex
	<option>Matilda has Worms
	<option>Schnitzel Blast
	</select>
	<style>
	.listBox{
		width: 400px;
		height: 500px;
		position: relative;
	}
	</style>
	</fieldset> -->
  </body>
  <script>
	var model = new Model();
	var view = new View();
	var controller = new Controller(view, model);
	view.control(controller);
  </script>
</html>

Upvotes: 0

Views: 49

Answers (1)

Darren Wainwright
Darren Wainwright

Reputation: 30727

You're using document.getElementsById() - there is no getElementSById -notice the S.

There is document.getElementById() which will return a single element.

There is also document.getElementsByTagName() and document.getElementsByClassName(). Both of these will return an HTMLCollection - and array-like object of elements.

Looking at your code, it seems all you need to do is change getElementsById to getElementById

As a final note - the browser console is your friend. Your console would 100% have shown you a bunch of error messages saying document.getElementsById() is not a function - when developing with JS ALWAYS refer to your console.

You also have an issue with how you're assigning your onclick.

It should be like this:

addBtn.onclick = function(){ controller.addItem(songName)};

Here is a working fiddle for you - only change really was the above

https://jsfiddle.net/Lfbhmwhe/

Upvotes: 2

Related Questions