By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,955 Members | 1,756 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,955 IT Pros & Developers. It's quick & easy.

How to combine 2 different function of javascript

P: 1
Hello, i'm newbie on writing HTML and Javascript code, can anyone help me to figure it out how to combine this js code
Expand|Select|Wrap|Line Numbers
  1. var data = [{dept: 'Marketing', user: []},{dept: 'IT', user: []},{dept: 'Accounting', user: []}];
  2.         function initCombo(){
  3.             var opt1 = document.getElementById('opt1');
  4.             var opt2 = document.getElementById('opt2');
  5.             for(var i=0;i<data.length;i++){
  6.                 //alert(data[i].dept);
  7.                 var option = document.createElement('option');
  8.                 option.value = i;
  9.                 option.text = data[i].dept;
  10.                 opt1.add(option);    
  11.             }
  12.             for(var i=0;i<data.length;i++){
  13.                 //alert(data[i].dept);
  14.                 var option = document.createElement('option');
  15.                 option.value = i;
  16.                 option.text = data[i].dept;
  17.                 opt2.add(option);    
  18.             }
  19.         }
  20.         function save(){
  21.             var  input = document.getElementById('input');
  22.             if (input.value != ''){
  23.                 var opt1 = document.getElementById('opt1').value;
  24.                 data[opt1].user[data[opt1].user.length] = input.value;
  25.  
  26.                 reloadOpt2();
  27.             }else{
  28.                 alert('ISI KAN DATA COI');
  29.             }
  30.             input.focus();
  31.             input.value='';
  32.         }
  33.  
  34.         function reloadOpt2(){
  35.             var opt2 = document.getElementById('opt2').value;
  36.             var optUser = document.getElementById('optUser');
  37.             var length = optUser.options.length ;
  38.  
  39.  
  40.             while(optUser.options.length != 0){
  41.                 optUser.removeChild(optUser.options[0]);
  42.             }
  43.  
  44.             for (var i=0; i<data[opt2].user.length; i++){
  45.                 var option = document.createElement('option');
  46.                 option.value = i;
  47.                 option.text = data[opt2].user[i];
  48.                 optUser.add(option);    
  49.             }
  50.         }
HTML
Expand|Select|Wrap|Line Numbers
  1. <body onload='initCombo()'>
  2.  
  3. <select id="opt1">
  4. </select>
  5. <br/>
  6.  
  7. <input type='text' id='input' value=''/>
  8. <br/>
  9.  
  10. <input type='submit' value='Simpan' onclick='save()'/>
  11. <br/>
  12.  
  13. <select id="opt2" onchange='reloadOpt2()'>
  14. </select>
  15.  
  16.  
  17.  
  18. <select id="optUser">
  19. </select>
to one of my HTML which is using javascript for changing table content

here's the js code
Expand|Select|Wrap|Line Numbers
  1. function myFunction() {
  2.     var x = document.getElementById("mySelect").value;
  3.     document.getElementById("demo1").innerHTML = "title";
  4.     document.getElementById("demo2").innerHTML = "test";
  5.     document.getElementById("demo3").innerHTML = "test";
  6.     document.getElementById("demo4").innerHTML = "test";    
  7.     }
  8.  
  9. function myFunction1(){
  10.     var x = document.getElementById("mySelect").value;
  11.     document.getElementById("demo1").innerHTML = "title";
  12.     document.getElementById("demo2").innerHTML = "using js DOM";
  13.     document.getElementById("demo3").innerHTML = "test";
  14.     document.getElementById("demo4").innerHTML = "copyright@test";
  15.     }
and HTML code
Expand|Select|Wrap|Line Numbers
  1. <button id="mySelect" onclick="myFunction1()">Home</button>
  2.     <button onclick="()">Login</button>
  3.     <button id="mySelect" onclick="myFunction()">About</button>
  4.  
  5. -----------
  6. <p align="center" id="demo1"></p></h1></center>
  7.     <p align="left" id="demo2"></p>
  8.     <p align="left" id="demo3"></p>
  9.     <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*
Dec 18 '14 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.