How to combine 2 different function of javascript

**leezend** · Dec 18 '14, 04:42 PM

Hello, i'm newbie on writing HTML and Javascript code, can anyone help me to figure it out how to combine this js code

Code:

var data = [{dept: 'Marketing', user: []},{dept: 'IT', user: []},{dept: 'Accounting', user: []}];
		function initCombo(){
			var opt1 = document.getElementById('opt1');
			var opt2 = document.getElementById('opt2');
			for(var i=0;i<data.length;i++){
				//alert(data[i].dept);
				var option = document.createElement('option');
				option.value = i;
				option.text = data[i].dept;
				opt1.add(option);	
			}
			for(var i=0;i<data.length;i++){
				//alert(data[i].dept);
				var option = document.createElement('option');
				option.value = i;
				option.text = data[i].dept;
				opt2.add(option);	
			}
		}
		function save(){
			var  input = document.getElementById('input');
			if (input.value != ''){
				var opt1 = document.getElementById('opt1').value;
				data[opt1].user[data[opt1].user.length] = input.value;
				
				reloadOpt2();
			}else{
				alert('ISI KAN DATA COI');
			}
			input.focus();
			input.value='';
		}
		
		function reloadOpt2(){
			var opt2 = document.getElementById('opt2').value;
			var optUser = document.getElementById('optUser');
			var length = optUser.options.length ;
			
			
			while(optUser.options.length != 0){
				optUser.removeChild(optUser.options[0]);
			}
			
			for (var i=0; i<data[opt2].user.length; i++){
				var option = document.createElement('option');
				option.value = i;
				option.text = data[opt2].user[i];
				optUser.add(option);	
			}
		}

HTML

Code:

<body onload='initCombo()'>

<select id="opt1">
</select>
<br/>

<input type='text' id='input' value=''/>
<br/>

<input type='submit' value='Simpan' onclick='save()'/>
<br/>

<select id="opt2" onchange='reloadOpt2()'>
</select>



<select id="optUser">
</select>

to one of my HTML which is using javascript for changing table content

here's the js code

Code:

function myFunction() {
	var x = document.getElementById("mySelect").value;
    document.getElementById("demo1").innerHTML = "title";
	document.getElementById("demo2").innerHTML = "test";
	document.getElementById("demo3").innerHTML = "test";
	document.getElementById("demo4").innerHTML = "test";	
	}
	
function myFunction1(){
	var x = document.getElementById("mySelect").value;
	document.getElementById("demo1").innerHTML = "title";
	document.getElementById("demo2").innerHTML = "using js DOM";
	document.getElementById("demo3").innerHTML = "test";
	document.getElementById("demo4").innerHTML = "copyright@test";
	}

and HTML code

Code:

<button id="mySelect" onclick="myFunction1()">Home</button>
	<button onclick="()">Login</button>
	<button id="mySelect" onclick="myFunction()">About</button>
 
-----------
<p align="center" id="demo1"></p></h1></center>
    <p align="left" id="demo2"></p>
	<p align="left" id="demo3"></p>
	<p align="left" id="demo4"></p>

all I want is when i click on Login button, it will show the combo box that is in the first javascript

*sorry for my bad english*