ページがロードされていないときに次のステートメントを呼び出すと、「add」オブジェクトを取得できず、プロンプトが空かオブジェクトではありません。
次のようにコードをコピーします。
document.getElementById("追加").onclick = function(){
アラート("こんにちは");
}
使用時に利用できるオブジェクト
次のようにコードをコピーします。
window.onload = function(){
document.getElementById("追加").onclick = function(){
アラート("こんにちは");
}
}
次のようにコードをコピーします。
<script type="text/javascript">
//選択した項目が左から右に移動します
関数 toright() {
var firstElement = document.getElementById("first");
var SecondElement = document.getElementById("秒");
var firstoptionElement = firstElement.getElementsByTagName("オプション");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex は select のプロパティです
SecondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//すべて右へ移動
関数 allright(){
var firstElement = document.getElementById("first");
var SecondElement = document.getElementById("秒");
var firstoptionElement = firstElement.getElementsByTagName("オプション");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
SecondElement.appendChild(firstoptionElement[0]);//オプションオプションが選択されている場合、インデックスは 0 になります
}
}
// ダブルクリックで右に移動
関数db(){
/* //方法 1
var firstElement = document.getElementById("first");
var SecondElement = document.getElementById("秒");
var firstoptionElement = firstElement.getElementsByTagName("オプション");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex は select のプロパティです
SecondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//方法2
var firstElement = document.getElementById("first");
var SecondElement = document.getElementById("秒");
SecondElement.appendChild(firstElement[firstElement.selectedIndex]);
}
</script>
<style type="text/css">
</スタイル>
</head>
<本文>
<テーブル align="left">
<tr>
<td>
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1">オプション 1</option>
<option value="2">オプション 2</option>
<option value="3">オプション 3</option>
<option value="4">オプション 4</option>
<option value="5">オプション 5</option>
<option value="6">オプション 6</option>
</選択>
</td>
<td valign="middle">
<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
</td>
<td align="left">
<select name="2" size="10" multiple="multiple" id="2">
<option value="オプション 8">オプション 8</option>
</選択>
</td>
</tr>
</テーブル>
</body>