0
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>
上記
た。また、あなたが正しくそれを大文字にしてください。それはもう一つの簡単な方法です。 –
ありがとうございますが、これで問題は解決しません。私は "getElementById（）"でコードを更新しました –
@AlinSt - ブラウザのコンソールでエラーメッセージを確認してください – Darren