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

我想在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：

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

来源

2016-09-27 Alin St

您正在使用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/

来源

2016-09-27 17:58:23 Darren

另外，还要确保你正确地利用它。这是另一个容易被绊倒的方法。 –

谢谢，但这不能解决我的问题。我用“getElementById（）”更新了代码“ –

@AlinSt - 请检查您的浏览器控制台是否有错误消息 – Darren

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

回答

相关问题