Question

我正在尝试使用javascript中的MVC设计创建一个应用程序，我从文本框中获取输入并将其插入到列表框中。

从我的角度来看，MVC应该正确实现，但是当我为“添加”创建一个onclick事件时，会出现问题。按钮。当它被按下时没有任何事情发生。

我必须在这里找到一些东西......我能得到一些指导吗？

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 = '';
}};

这是我的控制器：

function Controller(view, model){

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

观看：

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);
}};

这是文本框和列表框的HTML：

＆＃13;

    <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>

＆＃13;

Answer 1

您正在使用document.getElementsById() - getElementSById没有S - 注意。

document.getElementById()将返回单个元素。

还有document.getElementsByTagName()和document.getElementsByClassName()。这两个都将返回一个HTMLCollection - 和类似数组的元素对象。

查看您的代码，您似乎需要做的就是将getElementsById更改为getElementById

最后一点 - 浏览器控制台是你的朋友。您的控制台会100％向您显示一些错误消息document.getElementsById() is not a function - 使用JS进行开发时，请始终参考您的控制台。

您在分配onclick时也存在问题。

应该是这样的：

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

这是一个适合你的小提琴 - 只有改变才是上面的

https://jsfiddle.net/Lfbhmwhe/

将项目添加到列表时，按钮不会执行操作

1 个答案: