内容显示的javascript问题

Question

我正在创建一个根据输入创建模式的工具。
问题是，一切正常，直到社会联系得到解决为止 地点。
输入单个值后，它将正常显示。当输入多个值时，它将添加json格式数组的输出。
如果输入所有值，则整个代码可以正常工作，但是当随机删除某些值时，就会出现问题。逗号未删除。

我已经尽力了，但是有这个问题。一切正常，但是逗号管理不起作用，请考虑参考demo();并检查我的尝试。 demobackup()您可以互换这两个功能

function demo(e) {
  var cnt = 0;
  var name = e.id;
  var chil;
  // console.log(name);
  var fiels = document.getElementById(name + "d");
  var fb;
  var isfb;
  var lit = document.getElementsByClassName('social');
  var arr = document.getElementsByClassName('arr');
  var presibling = document.getElementById(name + "d").parentElement.previousSibling;
  var preid = document.getElementById(name).parentElement.parentElement.previousElementSibling.id;





  // console.log(e.id);
  // console.log(e.value);
  // console.log(presibling.querySelector("#"));
  // console.log(prevvalue);

  if (e.value != '') {
    document.getElementById('scon').setAttribute("class", "show");
    document.getElementById(name + "con").setAttribute("class", "show");
    fiels.setAttribute("class", "show");
    document.getElementById(name + "d").innerHTML = e.value;
  } else {
    document.getElementById(name + "con").setAttribute("class", "hide");
    fiels.setAttribute("class", "hide");
    document.getElementById(name + "d").innerHTML = e.value;

  }

  for (var i = 0; i < lit.length; i++) {
    if (lit[i].value != '') {
      cnt++;
    }
  }
  if (cnt == 0) {
    document.getElementById('scon').setAttribute("class", "hide");

  }

  if (cnt > 1) {

    if (name != "facebookurl") {
      var prevvalue = presibling.querySelector("span").innerText;
      fb = "ok";




      var inid = preid.slice(0, preid.length - 3) + "url";
      var pretval = document.getElementById(inid).value;
      console.log(pretval);

    }





    if (fb == "ok") {
      // if (prevvalue == '') {
      if (e.value == '' && pretval == '') {
        console.log("empty");
        chil = name + "con";
        var no = document.getElementById(chil).childNodes;
        no[0].nodeValue = '';
      } else {
        chil = name + "con";

        // chil.insertBefore('testimg', document.getElementById(no).childNodes[0]);
        var no = document.getElementById(chil).childNodes;

        no[0].nodeValue = ',';

      }
    }

    for (var j = 0; j < arr.length; j++) {
      arr[j].setAttribute("class", "show arr");
    }
  }
  if (cnt == 1) {
    chil = name + "con";
    var no = document.getElementById(chil).childNodes;
    no[0].nodeValue = '';
    for (var k = 0; k < arr.length; k++) {
      arr[k].setAttribute("class", "hide arr");
    }
  }

}


function demobackup(e) {
  var cnt = 0;
  var name = e.id;
  var fiels = document.getElementById(name + "d");
  console.log(e.value);
  var lit = document.getElementsByClassName('social');
  for (var i = 0; i < lit.length; i++) {
    if (lit[i].value != '') {
      cnt++;
    }
  }
  if (cnt == 0) {
    console.log("all inputs are empty");
    document.getElementById('scon').setAttribute("class", "hide");
  }
  // if (cnt == 1) {
  console.log("befor value" + cnt + name + "d" + name + "con");
  console.log("single" + e.value);

  document.getElementById('scon').setAttribute("class", "show");
  document.getElementById(name + "con").setAttribute("class", "show");
  fiels.setAttribute("class", "show");
  document.getElementById(name + "d").innerHTML = e.value;
  // }
  // if (cnt > 1) {
  // 	if (e.value == '') {
  // 		console.log("current empty" + e.id);
  // 		// document.getElementById(name + "d").setAttribute("class","hide");
  // 			document.getElementById(name + "con").setAttribute("class","hide");
  // 		// fiels.setAttribute("class","hide");
  // 		console.log("befor value" +  cnt + name + "d" +name + "con");
  // 	// document.getElementById(name + "d").innerHTML = e.value; 
  // 	}
  // 	console.log("multi");
  // 	console.log("counter " + cnt);
  // 	// var fiels = document.getElementById( name + "d");
  // 	document.getElementById('scon').setAttribute("class","show");
  // 	document.getElementById(name + "con").setAttribute("class","show");
  // 	fiels.setAttribute("class","show");
  // 	document.getElementById(name + "d").innerHTML = e.value; 
  // }
}


function pname() {
  var t = document.getElementById('pname').value;
  document.getElementById('wname').innerHTML = t;
  document.getElementById('cname').innerHTML = t;
}

function altname() {
  var a = document.getElementById('alternatename').value;
  if (a == '') {
    document.getElementById('at').setAttribute("class", "hide");
    document.getElementById('att').setAttribute("class", "hide");

  } else {
    document.getElementById('at').setAttribute("class", "show");
    document.getElementById('att').setAttribute("class", "show");
  }
  document.getElementById('aname').innerHTML = a;
  document.getElementById('alname').innerHTML = a;
}

function personurl() {
  var u = document.getElementById('personurl').value;
  document.getElementById('purl').innerHTML = u;
  document.getElementById('urnale').innerHTML = u;
}

function picurl() {
  var u = document.getElementById('picurl').value;
  document.getElementById('pcurl').innerHTML = u;
  document.getElementById('urnale').innerHTML = u;
}

function job() {
  var a = document.getElementById('jobtitle').value;
  if (a == '') {
    document.getElementById('jbcon').setAttribute("class", "hide");
    document.getElementById('att').setAttribute("class", "hide");

  } else {
    document.getElementById('jbcon').setAttribute("class", "show");
    document.getElementById('att').setAttribute("class", "show");
  }
  document.getElementById('jbttl').innerHTML = a;
  document.getElementById('alname').innerHTML = a;
}

function company() {
  var a = document.getElementById('company').value;
  if (a == '') {
    document.getElementById('workcon').setAttribute("class", "hide");
    document.getElementById('att').setAttribute("class", "hide");

  } else {
    document.getElementById('workcon').setAttribute("class", "show");
    document.getElementById('att').setAttribute("class", "show");
  }
  document.getElementById('coname').innerHTML = a;
  document.getElementById('alname').innerHTML = a;
}

function platform(sel) {
  var test = [];
  var len = sel.options.length;
  var counter = 0;

  for (var i = 0; i < len; i++) {
    opt = sel.options[i]
    console.log(counter);
    if (opt.selected) {
      counter++;
      document.getElementById(opt.value + 'con').setAttribute("class", "show top");
      document.getElementById(opt.value + 'url').setAttribute("onkeyup", "sociallink(this)");
      document.getElementById('scon').setAttribute("class", "show");

    } else if (counter == 0) {
      document.getElementById(opt.value + 'con').setAttribute("class", "hide");
      document.getElementById('scon').setAttribute("class", "hide");
      document.getElementById('multi').setAttribute("class", "hide");

    } else if (counter > 1) {
      document.getElementById('scon').setAttribute("class", "show");

      document.getElementById('single').setAttribute("class", "hide");
      document.getElementById('multi').setAttribute("class", "show");

    }
  }
}



function dam() {
  var i = document.getElementById('itext').value;
  if (i == '') {
    document.getElementById('pot').setAttribute("class", "hide");
    document.getElementById('frm').setAttribute("class", "hide");
    document.getElementById('otext').setAttribute("disabled", "disabled");

  } else {
    document.getElementById('pot').setAttribute("class", "show");
    document.getElementById('frm').setAttribute("class", "show");
    document.getElementById('otext').removeAttribute("disabled", "disabled");
  }
  document.getElementById('tname').innerHTML = i;
  document.getElementById('ttname').innerHTML = i;
}

function ram() {
  var o = document.getElementById('otext').value;
  document.getElementById('oname').innerHTML = o;
  document.getElementById('ooname').innerHTML = o;
}

.t {
  white-space: normal;
}

.hide {
  display: none;
}

.show: {
  display: inline-block;
}

.top {
  margin-top: 15px;
}

.height {
  height: 120px;
}

.none {
  display: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

.tab .nav-tabs {
  border-bottom: 1px solid #b6367f;
}

.tab .nav-tabs li {
  margin: 0 2px 0 0;
  position: relative;
}

.tab .nav-tabs li.active:before {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 51px;
  border: 14px solid transparent;
  border-top-color: #b6367f;
}

.tab .nav-tabs li.active:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 53px;
  border: 12px solid transparent;
  border-top-color: #fff;
}

.tab .nav-tabs li a {
  border: none;
  padding: 13px 35px;
  font-size: 14px;
  color: #777;
  background: transparent;
  border-radius: 0;
}

.tab .nav-tabs li a:hover {
  color: #b6367f;
}

.tab .nav-tabs li a i {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
  border: none;
  background: transparent;
  color: #b6367f;
  transition: background 0.20s linear 0s;
}

.tab .tab-content {
  font-size: 14px;
  color: #777;
  background: #fff;
  line-height: 25px;
  padding: 10px;
}

.tab .tab-content h3 {
  font-size: 26px;
}

@media only screen and (max-width: 479px) {
  .tab .nav-tabs li a {
    padding: 10px;
  }
  .tab .nav-tabs li.active:before {
    left: 28px;
    bottom: -24px;
    border-width: 12px;
  }
  .tab .nav-tabs li.active:after {
    left: 30px;
    bottom: -20px;
    border-width: 10px;
  }
}

.tab-pane {
  padding: 25px;
}


/*make pre containt readable removes whitespace*/

pre {
  white-space: pre;
}

.tag {
  color: #170;
}

.atn {
  color: #00c;
}

.atv {
  color: #a11;
}

.tab-content {
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>


<link rel="stylesheet" type="text/css" href="assests/css/style.css">


<div class="height"></div>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="form-row form-group">
        <div class="col">
          <input type="text" name="personname" id="pname" placeholder="Person's Name" class="form-control" onkeyup="pname()">
        </div>
        <div class="col">
          <input type="text" name="alternatename" id="alternatename" placeholder="Alternate Name" class="form-control" onkeyup="altname()">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <input type="url" name="personurl" id="personurl" class="form-control" placeholder="URL (Includes Protocol)" onkeyup="personurl()">
        </div>
        <div class="col">
          <input type="text" name="picurl" class="form-control" id="picurl" placeholder="Picture URL" onkeyup="picurl()">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <input type="text" name="jobtitle" id="jobtitle" class="form-control" placeholder="Job Title" onkeyup="job()">
        </div>
        <div class="col">
          <input type="text" name="company" class="form-control" id="company" placeholder="Company" onkeyup="company()">
        </div>
      </div>
      <div class="form-row form-group" id="facebookcon">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-facebook"></i></span>
          </div>
          <input type="text" name="facabook" class="form-control social" id="facebookurl" onkeyup="demo(this)">
        </div>
      </div>
      <div class="form-row form-group" id="twittercon">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-twitter"></i></span>
          </div>
          <input type="text" name="twitter" class="form-control social" id="twitterurl" onkeyup="demo(this)">
        </div>
      </div>
      <div class="form-row form-group" id="googlepluscon">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-google-plus"></i></span>
          </div>
          <input type="text" name="googleplus" class="form-control social" id="googleplusurl" onkeyup="demo(this)">
        </div>
      </div>
      <div class="form-row form-group" id="youtubecon">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-youtube"></i></span>
          </div>
          <input type="text" name="youtube" class="form-control social" id="youtubeurl" onkeyup="demo(this)">
        </div>
      </div>
      <div class="form-row form-group" id="linkedincon">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-linkedin"></i></span>
          </div>
          <input type="text" name="linkedin" class="form-control social" id="linkedinurl" onkeyup="demo(this)">
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="tab" role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">JSON-LD</a></li>
          <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Microdata</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade active show" id="Section1">
            <pre>
    <span class="tag">&lt;script</span> <span class="atn">type</span>=<span class="atv">"application/ld+json"</span><span class="tag">&gt;</span> 
    {
     "@context": "http://schema.org/",
     "@type": "Person",
     "name": "<span id="wname"></span>",<span id="at" class="hide">
      "alternateName": "<span id="aname"></span>",</span>
      "url": "<span id="purl"></span>",
      "image": "<span id="pcurl"></span>"<span id="jbcon" class="hide">,
      "jobTitle": "<span id="jbttl"></span>"</span><span id="scon" class="hide">, 
      "sameAs":<span class="hide arr"> [<br>   </span><span id="facebookurlcon" class="hide"> "<span class="hide" id="facebookurld"></span>"</span><span id="twitterurlcon" class="hide">,<br>    "<span class="hide" id="twitterurld"></span>"</span><span id="googleplusurlcon" class="hide">,<br>    "<span class="hide" id="googleplusurld"></span>"</span><span id="youtubeurlcon" class="hide">,<br>    "<span class="hide" id="youtubeurld"></span>"</span><span id="linkedinurlcon" class="hide">,<br>    "<span class="hide" id="linkedinurld"></span>"</span><span class="hide arr"><br>   ]</span></span></span><span id="workcon" class="hide">,
      "worksFor": {
        "@type": "Organization",
        "name": "<span id="coname"></span>"
      } </span> 
    }
    <span class="tag">&lt;/script&gt;</span>
    </pre>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="Section2">
            <pre>
    <span class="tag">&lt;div</span> <span class="atn">itemscope itemtype</span>=<span class="atv">"http://schema.org/WebSite"</span> <span class="tag">&gt;</span>
          <span class="tag">&lt;meta</span> <span class="atn">itemscope</span>=<span class="atv">"name"</span> <span class="atn">content</span>=<span class="atv">"<span id="cname"></span>" </span><span class="tag">/></span><span class="hide" id="att">
          <span class="tag">&lt;meta</span> <span class="atn">itemscope</span>=<span class="atv">"alternateName"</span> <span class="atn">content</span>=<span class="atv">"<span id="alname"></span>"</span> <span class="tag">/></span></span>
          <span class="tag">&lt;meta</span> <span class="atn">itemscope</span>=<span class="atv">"url"</span> <span class="atn">content</span>=<span class="atv">"<span id="urnale"></span>" </span><span class="tag">/></span><span class="hide" id="frm"> 
          <span class="tag">&lt;form</span> <span class="atn">itemscope</span>=<span class="atv">"potentialAction"</span> <span class="atn">itemscope itemtype</span>=<span class="atv">"http://schema.org/SearchAction"</span> <span class="tag">&gt;</span>
                <span class="tag">&lt;meta</span> <span class="atn">itemscope</span>=<span class="atv">"target"</span> <span class="atn">content</span>=<span class="atv">"<span id="ttname"></span>{search_term_string}<span id="ooname"></span>"</span> <span class="tag">/></span>
                <span class="tag">&lt;input</span> <span class="atn">itemscope</span>=<span class="atv">"query-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">name</span>=<span class="atv">"search_term_string"</span> <span class="atn">required</span> <span class="tag">/></span>
                <span class="tag">&lt;input</span> <span class="atn">type</span>=<span class="atv">"submit"</span> <span class="tag">/></span>
          <span class="tag">&lt;/form></span> </span>
    <span class="tag">&lt;/div></span></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>