按鈕不會執行操作時，將項添加到列表

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

按鈕不會執行操作時，將項添加到列表

回答

相關問題