Input Box Formatting Names

I am trying to create a page where the second input box formats someone's first, middle, and last name put in to first intial, middle name, last initial. So for example if someone puts in "Will Joe Smith" the output will be W. Joe S. and it will appear next to the input box. I'm completely stuck on the function for this though. Here is what I have so far:

onja = document.getElementById("but0");
onja.onclick = convertName;

onjb = document.getElementById("buta");
onjb.onclick = fnli;

function convertName() {
  var input = document.getElementById("name");
  var name = input.value;
  var spaceIndex = name.indexOf(" ");
  var firstName = name.substring(0, spaceIndex);
  var lastName = name.substring(spaceIndex + 1);
  /* lastName = lastName.toUpperCase();*/

  var firstInitial = firstName.charAt(0);
  input.value = lastName + ", " + firstInitial;

  var s = " ";
  objspan = document.getElementById("span1");


  for (var k = 0; k < firstName.length; k++) {
    if (k % 2 == 0) {
      var position = firstName.length - k - 1;

      var smid = firstName.charAt(position);
      s = s + smid;
    }
  }
  var s1 = " ";
  for (var k = 0; k < lastName.length; k++) {
    if (k % 2 == 0) {
      var position = lastName.length - k - 1;
      var s1mid = lastName.charAt(position);
      s1 = s1 + s1mid;
    }
  }

  objspan.innerHTML = s + s1;
}

function fnli() {

  var input = document.getElementById("name1");
  var name = input.value;
  var spaceIndex = name.indexOf(" ");
  var firstName = name.substring(0, spaceIndex);
  var lastName = name.substring(spaceIndex + 4);
  var p1 = name.substring(spaceIndex + 1, spaceIndex + 2);

  st = firstName.substring(0, 1);
  stm = p1;
  st1 = lastName.substring(0, 1);

  stf = st + " ." + stm + "." + st1 + ".";
  spanp = document.getElementById("span2");
  spanp.innerHTML = stf;
}

<html>

<head>
  <script src="split.js" defer></script>
</head>

<body>
  <h1>Name Converter</h1>
  <p>Type your name:</p>

  <div>
    <input id="name" type="text" size="24" /> </br>
    <span id="span1">second output goes here</span></br>
    <button id="but0">Convert to last, First</button> </br>
    </br>

    <button id="buta"> Convert From Name MI. Lname to FI.MI.LI.</button></br>
    <input id="name1" type="text" size="24" />
    <span id="span2">Third output goes here</span>
  </div>
</body>
</html>

Solution

Use the split() function to split a string into an array using a specified delimiter such as space.

onjb = document.getElementById("buta");
onjb.onclick = fnli;

function fnli() {

  var input = document.getElementById("name1");
  var name = input.value;
  var [firstName, middleName, lastName] = name.split(" ");

  st = firstName.substring(0, 1);
  stm = middleName;
  st1 = lastName.substring(0, 1);

  stf = st + ". " + stm + " " + st1 + ".";
  spanp = document.getElementById("span2");
  spanp.innerHTML = stf;
}

<html>

<head>
  <script src="split.js" defer></script>
</head>

<body>
  <h1>Name Converter</h1>
  <p>Type your name:</p>

  <div>
    <button id="buta"> Convert From Name MI. Lname to FI.MI.LI.</button></br>
    <input id="name1" type="text" size="24" />
    <span id="span2">Third output goes here</span>
  </div>
</body>
</html>