javascript / jquery配置生成器

Question

在jsfiddle我试图为我的应用程序制作配置生成器，基本上格式如下：

型的用户的通过的 IP：端口

ip：port 是可选的

它会从一个选择框生成两个文本框，输入为用户：传递，另一个 ip：port ，如果你不明白，这个是一个有点视觉效果：

pic of what i want

Answer 1

为了它的价值：

document.querySelector('button').addEventListener('click', function() {
  var type = document.getElementById('type').value;
  var useipport = document.getElementById('useipport').checked;
  var userpass = document.getElementById('userpass').value;
  var ipport = document.getElementById('ipport').value;

  var output = document.getElementById('output');

  var users = [],
    ips = [],
    config = [];

  if (userpass.length > 0) users = userpass.split('\n');
  if (ipport.length > 0) ips = ipport.split('\n');

  var ix = 0;

  while (ix < users.length || ix < ips.length) {
    var user = '';
    user += type + ';';
    if (users[ix]) user += users[ix] + ';';
    if (useipport && ips[ix]) user += ips[ix];
    config.push(user);
    ix++;
  }

  output.value = config.join("\n");
});

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="six columns">
      <select id="type">
        <option value="PT">PT</option>
        <option value="GL">GL</option>
      </select>Type
    </div>
    <div class="six columns">
      <label>
        <input type="checkbox" id="useipport">
        <span class="label-body">Use IP/Port</span>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="six columns">
      <textarea class="u-full-width" placeholder="abc:123" id="userpass"></textarea>
    </div>
    <div class="six columns">
      <textarea class="u-full-width" placeholder="1.1.1.1:1111" id="ipport"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="six columns">
      <textarea class="u-full-width" id="output"></textarea>
    </div>
    <div class="six columns">
      <button>Create</button>
    </div>
  </div>
</div>