javascript

The drop down list select moves from the left border to the right example

When the following statement is called while the page is still loaded, the object “add” cannot be retrieved, indicating that it is empty or not


document.getElementById("add").onclick = function(){
alert("hello");
}

An object that is desirable when used


window.onload = function(){
document.getElementById("add").onclick = function(){
alert("hello");
}
}

<script type="text/javascript">
//The selected ones move from the left to the right
function toright() {
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //SelectedIndex is a property of select
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//All to the right
function allright(){
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstoptionElement[0]);//The index is 0 when the option option is selected
}
}
//Double click to move to the right
function db(){
/* //Methods a
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //SelectedIndex is a property of select
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//Method 2
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
secondElement.appendChild(firstElement[firstElement.selectedIndex]);
}

</script>

<style type="text/css">

</style>
</head>
<body>
<table width="285" height="169" border="0" align="left">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1"> options 1</option>
<option value="2"> options 2</option>
<option value="3"> options 3</option>
<option value="4"> options 4</option>
<option value="5"> options 5</option>
<option value="6"> options 6</option>
</select>
</td>
<td width="69" 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 width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value=" options 8"> options 8</option>
</select>
</td>
</tr>
</table>
</body>